文本对齐在两个相同的 div 上的工作方式不同?
Posted
技术标签:
【中文标题】文本对齐在两个相同的 div 上的工作方式不同?【英文标题】:Text-align doesn't work the same way on two identical div? 【发布时间】:2017-06-23 09:11:42 【问题描述】:我在发帖前进行了研究,但找不到任何解决问题的方法。
我正在我的网站上制作一个菜单,它的宽度为 100%,在菜单内,我放置了 3 个不同的 div。
设法让它们占据 100% 的宽度
.clear
clear: both;
.menu
position: relative;
height: 20%;
text-align: center;
.menu:after
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
.menu li
float: left;
list-style: none;
margin-right: 5%;
.left,
.center,
.right
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
.left,
.right
width: 30%;
.left
left: 5%;
margin-right: 5%;
.right
right: 5%;
.center
width: 20%;
left: 40%;
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li><a href="#01">Element 1</a>
</li>
<li><a href="#02">Element 2</a>
</li>
<li><a href="#03">Element 3</a>
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li><a href="#04">Element 4</a>
</li>
<li><a href="#05">Element 5</a>
</li>
<li><a href="#06">Element 6</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
我的菜单有 svg 背景,但我认为这不是我的问题。问题是在 .left 和 .right 内部,text-align 不起作用,但对 .center div 有效。 一开始我的三个 div 是向左浮动的,但我认为这是问题所在,我尝试使用绝对位置进行定位,但样式不起作用。
我应用背景颜色来可视化我的 div 的宽度并且文本根本不在中心,显然“文本对齐:右”也不起作用,我不明白,因为 .center 和 .left /.right 基本相同,我不知道 .center 和其他 div 有什么区别。
我的代码有什么问题?
【问题讨论】:
【参考方案1】:因为以下样式
.menu lifloat: left; list-style: none; margin-right: 5%;
没有空间让您看到text-align
对您引用的文本有任何影响。这是因为当您 float
那些 li
时,它们会缩小到仅其内容所需的空间。
既然如此,很可能是因为您的ul
中的padding
和margin
让您觉得text-align
是答案。见以下代码
.right ul margin: 0;padding:0;
还有它的作用:
.clear
clear: both;
.menu
position: relative;
height: 20%;
text-align: center;
.menu:after
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
.menu li
float: left;
list-style: none;
margin-right: 5%;
.left,
.center,
.right
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
.left,
.right
width: 30%;
text-align: left;
.left
left: 5%;
margin-right: 5%;
.right
right: 5%;
.center
width: 20%;
left: 40%;
a
color: white;
.right ul
margin: 0;
padding: 0;
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li><a href="#01">Element 1</a>
</li>
<li><a href="#02">Element 2</a>
</li>
<li><a href="#03">Element 3</a>
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li><a href="#04">Element 4</a>
</li>
<li><a href="#05">Element 5</a>
</li>
<li><a href="#06">Element 6</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
根据您要实现的确切布局,有很多选项可以让您充分利用 CSS 赋予您的强大功能,但希望这足以引导您迈向您希望的方向得到。
【讨论】:
谢谢!它工作正常!我只是将这个浮点数转换为“显示内联”,仅此而已!以上是关于文本对齐在两个相同的 div 上的工作方式不同?的主要内容,如果未能解决你的问题,请参考以下文章