以某个字母为中心的文字
[英]Center text around a certain letter
问题描述
我正在尝试在Nav Bar（使用引导程序）中集中情感。 到目前为止，导航栏如下所示：
导航栏居中居中
我想做的是使用“ |” 居中，旁边紧紧围绕着文本，而不仅仅是使句子居中。 这很难解释，但我希望您理解我的意思-“ |” 居中，文本左右对齐，而不是整个句子居中，中间字母位于中间。 我想要“ |” 在中间。
我尝试将“ |”居中 并在左侧向右浮动文本，在左侧向右浮动文本，但这只是使文本完全向右移动，而不是在“ |”之前停止。
使用代码段查看代码，但请使用“整页”，以便其正常运行...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title> <?php echo $album_nm; ?> </title> <!-- Bootstrap Core CSS --> <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesnt work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;"> <div class="container" style="text-align: center;"> <div class="container" class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="font-family: font71888;" class="navbar-brand page-scroll" href="#page-top"> <div style="display:inline-block; text-align: right;"> CHLOE </div> <div style="display:inline-block; float: none; margin: 0 auto;"> | </div> <div style="display:inline-block; text-align: left;"> <?php echo $album_nm; ?> </div> </div> <!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> --> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav" style="align: center; float: center; text-align: center;"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden"> <a class="page-scroll" href="#page-top"></a> </li> <li> <a class="page-scroll" href="#buy">Buy</a> </li> <li> <a class="page-scroll" href="#story">My Story</a> </li> <li> <a class="page-scroll" href="#about">About Me</a> </li> <li> <a class="page-scroll" href="#warchild">War Child</a> </li> <li> <a class="page-scroll" href="#listen">Listen</a> </li> <li> <a class="page-scroll" href="#thanks">Thanks</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> </body> </html>
编辑：
感谢Andrei Gheorghiu的回答，这对我有用，而且看起来非常不错！ 我已将他的答案标记为正确，这是目前投票次数最多的答案。
2 个解决方案
解决方案1
4 已采纳 2017-03-01 14:27:16
这是我的处理方式：
.navbar-brand { display: flex; } .navbar-brand > div{ flex: 1 1 0; padding: 0 4px; } .navbar-brand > div:first-child, .navbar-brand > div:last-child{ flex-basis: 50%; } .navbar-brand > div:first-child { text-align: right; }
<div class="navbar-brand page-scroll" href="#page-top"> <div>CHLOE</div> <div>|</div> <div>This is a long album name</div> </div>
PS：不要忘了在部署CSS之前对autoprefix进行自动autoprefix 。
并停止使用内联style ！ 如果声明是内联的，如何将声明包装在@media查询中？
解决方案2
0 2017-03-01 14:23:44
这里。
注意：如果您不希望在居中文本时计算移动菜单按钮，则只需删除div：隐藏文本的div隐藏属性即可
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title> <?php echo $album_nm; ?> </title> <!-- Bootstrap Core CSS --> <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesnt work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;"> <div class="container" style="text-align: center;"> <div class="container" class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="font-family: font71888; float: none; overflow: hidden" class="navbar-brand page-scroll" href="#page-top"> <div style="display:block; text-align: right; width: 50%"> CHLOE | </div> <div style="display:block; text-align: left; width: 50%" > <?php echo $album_nm; ?> </div> </div> <!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> --> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav" style="align: center; float: center; text-align: center;"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden"> <a class="page-scroll" href="#page-top"></a> </li> <li> <a class="page-scroll" href="#buy">Buy</a> </li> <li> <a class="page-scroll" href="#story">My Story</a> </li> <li> <a class="page-scroll" href="#about">About Me</a> </li> <li> <a class="page-scroll" href="#warchild">War Child</a> </li> <li> <a class="page-scroll" href="#listen">Listen</a> </li> <li> <a class="page-scroll" href="#thanks">Thanks</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> </body> </html>
以特定词为中心的文字
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.