如何与显示水平对齐:内联块
如何与显示水平对齐:内联块
提问于 2016-08-10 00:30:42
看起来非常简单，但是当我在文本上使用display:inline-block时，我无法在父元素中水平地居中文本。我需要它是display:inline-block，因为我希望我创建的文本周围的边框是文本的大小，而不是，而不是父文本的。
还有另一种方法来使边框--我给文本的宽度--而不是父文本的宽度？
a.studio-nav {
font-family: 'brandon-reg';
font-weight: 900;
color: white;
font-size: 20px;
display: inline-block;
text-align: center;
margin:0 auto;
padding:7px 4px;
}
a.studio-nav:hover {
border:2px solid white;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
text-decoration: none;
}<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row clearfix">
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
text
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
I want
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
centered
</a>
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-08-10 00:34:41
Stack Overflow用户
发布于 2016-08-10 03:34:07
引导还有一种快速的方法，可以通过一个名为“..text center”的对齐类来实现这一点。
<div class="col-xs-4 col-md-4 text-center"> <!-- class added-->
<a href="/" class="studio-nav">
text
</a>
</div>Stack Overflow用户
发布于 2017-03-10 09:51:29
试一试
display: inline-table;而不是
display: inline-block;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38862463
复制相关文章
相似问题
腾讯云开发者
