css 如何在不使用高度、行高和填充的情况下将文本对齐到div的中心?

qjp7pelc  于 2022-11-19  发布在  其他
关注(0)|答案(6)|浏览(174)

如何在不使用高度、行高和填充的情况下将文本对齐到div的中心?

<div id="slot">
   <p id="element">100 </p>
</div>

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
}

#element {
    text-align: center;
}
i34xakig

i34xakig1#

我想你是想垂直对齐吧?我不知道我是否理解你的要求,但我已经做到了。
HTML语言

<div id="slot"><p id="element">100 </p></div>

CSS

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    display:table;
    height:150px;
    text-align: center;
}

#element {    
    display:table-cell;
    vertical-align:middle;
}

我只在CSS中添加了三行,display:table代表父级,display:table-cell代表子级,最后我添加了vertical-align: middle,如果高度增加,则在中间显示文本,并将text-align:center放在容器div处。
Here you have an example

rkttyhzu

rkttyhzu2#

text-align是一个要在父对象上设置的属性,因此将它放在#slot css中
http://jsfiddle.net/uFpCL/

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
    text-align: center;
}
a8jjtwal

a8jjtwal3#

如果你想让 #element 标记的内容居中,可以采用@newpatriks的方法,但是如果你想让 #element 位于 #slot 元素的中间,可以在 #slot 元素中添加css:

#slot {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

这样,#slot 的所有子级都将在该位置居中。
http://jsfiddle.net/A7S8h/3/

pnwntuvh

pnwntuvh4#

我认为你应该探索一下flexbox。它应该是使用css布局的圣杯。一个快速教程:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

wbgh16ku

wbgh16ku5#

使用边距调整文本

#slot {
  margin:auto;
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
    text-align: center;
}

很好用,现在试试。
jsfiddle

l5tcr1uw

l5tcr1uw6#

我认为这是一个相当过时的问题,但如果有人仍然在寻找答案,这里是2022年的简单解决方案:
只需将类设置为元素.centerInsideDiv,并在css中:

.centerInsideDiv {
  display: grid;
  justify-items: center;
  align-items: center;

希望我今天能帮助到别人!

相关问题