我们的网站需要一些产品的色样,老板希望它们看起来与打印目录中的完全一样。这意味着一排水平的方 block ,每个方 block 都有不同的颜色,并且该颜色的名称覆盖在其绝对中心。就像这样:
我尝试了两种不同的方法来使我们网站上的样本遵循这一既定惯例,但由于某种原因它没有发生。而且,是的,我似乎仍然是一个新手。
这是我的第一次尝试,使用 display:table/display:table-cell方法:
<p>Standard Ink Colors</p>
<ul class="color-list">
<li id="thumb-red">
<p>Red</p>
</li>
<li id="thumb-orange">
<p>Orange</p>
</li>
<li id="thumb-athleticgold">
<p>Athletic Gold</p>
</li>
</ul>
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>
所有内容都沿着文本的最后一条基线对齐。
所以我尝试使用 Flexbox :
<p>Standard Ink Colors</p>
<ul class="color-list">
<li id="thumb-red">Red</li>
<li id="thumb-orange">Orange</li>
<li id="thumb-athleticgold">Athletic Gold</li>
</ul>
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>
类似的问题,只是现在事情在第一个基线上对齐。
这个问题有解决办法吗?
最佳答案
将各个元素的父项设为 flex 容器。这将激活几个默认设置:
flex-direction: row
- 每个子元素(“flex item”)被强制放入一行flex-wrap: nowrap
- 元素将无法换行
然后使主容器的每个 flex 元素兼作(嵌套) flex 容器。这将允许您控制子元素(在本例中为文本)的对齐方式。
将 justify-content
、align-items
和 text-align
全部设置为 center
时,文本将始终垂直和水平居中。
.color-list {
display: flex;
justify-content: center;
padding: 0;
}
.color-list li {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 4em;
height: 4em;
}
#thumb-red { background-color: #CE1126; }
#thumb-orange { background-color: #FE5000; }
#thumb-athleticgold { background-color: #FFB81C; }
<ul class="color-list">
<li id="thumb-red">Red</li>
<li id="thumb-orange">Orange</li>
<li id="thumb-athleticgold">Athletic Gold</li>
</ul>
关于原始代码中的错位...
一般来说,没有理由在每个元素上使用 display: inline-flex
。但是,如果您有这样的要求,则只需将 vertical-align: middle
或 top
添加到每个 li
即可。解释如下: Why is there a vertical scroll bar if parent and child have the same height?
浏览器支持:
所有主流浏览器都支持 Flexbox,except IE < 10 。一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 vendor prefixes 。要快速添加前缀,请使用 Autoprefixer 。更多详情请参见this answer .
关于html - 将元素垂直和水平居中,同时水平对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40117296/