gpt4 book ai didi

html - 水平对齐表格内的表格单元格

转载 作者:行者123 更新时间:2023-11-28 03:37:19 25 4
gpt4 key购买 nike

如何水平对齐此表格单元格中的文本?看起来它向右浮动,我不确定为什么。 https://jsfiddle.net/o06e11o9/

HTML

<div class="affil2">
<div class="oval2"></div>
<div class="contents">
a lorem ipsum dolor sit amet. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, tempor a tortor.
<br />
<br /> Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut.
</div>
</div>

CSS

.affil2 {
align-content: center;
display: table;
text-align: center;
z-index: 20;
border: 1px solid #705A1D;
position: relative;
height: 200px;
width: 960px;
background-color: #af9254;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .35);
}

.contents {
margin: 0 auto;
text-align: left;
width: 600px;
display: table-cell;
vertical-align: middle;
color: #fff;
font-size: 18px;
}

.oval2 {
z-index: 1;
position: absolute;
top: -110px;
width: 1200px;
height: 250px;
border-radius: 100%;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 0, 0, 0) 100%);
}

最佳答案

你的代码中有很多奇怪的东西,但是你可以改变你的解决方案:

width: 100%;text-align: center;contents

.contents {
margin: 0 auto;
text-align: center;
width: 100%;
display: table-cell;
vertical-align: middle;
color: #fff;
font-size: 18px;
}

JsFiddle Link

关于html - 水平对齐表格内的表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44402063/

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