<分区>
<分区>
我有一个宽度为 100 像素、高度为 100 像素的 div，但我希望文本在 div 的中间对齐。
我在水平对齐中使用文本居中对齐，在垂直对齐中我尝试使用 vertical-align 属性。它不起作用，然后我使用 line-height 使内容正好位于文档的中间。根据内容，每个元素的行高都会有所不同。这个问题有什么合适的解决方案吗？
<!DOCTYPE html>
<html>
<head>
<style>
.dragg-elem div {
width: 100px;
height: 100px;
border: 2px solid #ccc;
display: inline-block;
line-height: 90px;
text-align:center;
}
</style>
</head>
<body>
<div class="dragg-elem">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
</div>
</body>
</html>
最佳答案
您可以为此使用 flex。
您还可以在整个页面中查看它，它将在垂直和水平方向上居中。
试试这个
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<style>
.dragg-elem{
display:flex;
align-items:center;
height:100vh;
justify-content: center;
}
.dragg-elem div {
width: 100px;
height: 100px;
border: 2px solid #ccc;
display: inline-block;
line-height: 90px;
text-align:center;
}
</style>
</head>
<body>
<div class="dragg-elem">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
</div>
</body>
</html>关于html - 如何使用 flex 属性将文本准确地放在任何 block 元素的中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53945568/
相关文章：
javascript - iOS7 Safari 手机| Html 视频流 |未触发结束事件
javascript - 使用javascript在HTML5中使用dir ="auto"时获取div方向
jquery - JQuery 插入的 HTML 导致与纯 HTML 不同的对齐方式
react-native - React Native Scrollview 与 flexGrow 不滚动
html - 使用 flexbox 在 DIV 中居中左对齐元素
javascript - 延迟 addClass jQuery