gpt4 book ai didi

html - 垂直和水平居中 block ,动态宽度和高度

转载 作者:太空宇宙 更新时间:2023-11-04 00:22:52 25 4
gpt4 key购买 nike

我需要将一个元素在垂直和水平方向居中,并且该元素不能有任何固定尺寸。元素的内容不能受到影响...意味着一些元素将文本左对齐,其他元素居中,它们可能是图像等。

这是我目前所在的位置:http://jsfiddle.net/Shpigford/BUbmz/

蓝色 block 的宽度和高度根据内容动态变化并水平居中,效果很好。

但我现在需要做的是将蓝色 block 垂直居中。

蓝色 block 不能有任何固定尺寸,但红色 block 可以

这是我的 CSS:

section {
width: 500px;
height: 300px;
background: red;
}
.options {
display:table;
margin: 0 auto;
background: blue;
}
h2 {
text-align: center;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
text-align: center;
}
li {
text-align: left;
}

和 HTML:

<section>
<div class="options">
<h2>My question</h2>
<ul>
<li>Ligula Quam</li>
<li>Condimentum Nullam Mollis</li>
<li>Aenean</li>
<li>Commodo Dolor Nibh Ligula Vulputate</li>
</ul>
</div>
</section>

最佳答案

这是一个垂直居中 DIV 的解决方案,具有适用于各种浏览器(包括较旧的 IE 版本)的后备方案。

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[编辑]

翻译后,你的 fiddle 变成了这样:

http://jsfiddle.net/GolezTrol/BUbmz/1/

关于html - 垂直和水平居中 block ,动态宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8328314/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com