如何在中间（垂直）对齐文本
[英]How to align text in middle (vertically)
问题描述
I am struggling with this many hours now and still I can't find a solution. 
我现在正在努力这么多个小时，但我仍然无法找到解决方案。 I've made this nice grid that adjusts with text length and browser resising. 我做了这个漂亮的网格，可以调整文本长度和浏览器调整。 The problem now is that I can't get text go the middle of the box. 现在的问题是我无法将文本放在框中间。
I've tried everything.. I used several properties in order to achieve this but nothing worked. 我已经尝试了所有的东西..我使用了几个属性来实现这一目标，但没有任何效果。
text-align: center;
vertical-align: middle;
line-height: "same as div";
The css code: css代码：
.parent {
text-align:center;
margin:0px;
width:100%;
padding:0px;
font-size:18px;
color:#000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.child {
padding:18px 25px;
background: rgba(0, 0, 0, .5);
list-style-type:none;
width:inherit;
margin:5px;
}
3 个解决方案
解决方案1
5 已采纳 2015-12-18 00:24:06
Is this what you want? 这是你想要的吗？
.parent { text-align:center; margin:0px; width:100%; padding:0px; font-size:18px; color:#000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; vertical-align: middle; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .child { position: relative; background: rgba(0, 0, 0, .5); padding:10px; list-style-type:none; width:inherit; align-items: center; justify-content: center; height:inherit; display: inline-flex; vertical-align: middle; margin:5px; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="parent"> <div class="child"><span>sometext</span></div> <div class="child">somemoretext somemoretext</div> <div class="child">sometext</div> <div class="child">sometext</div> </div> <div class="parent"> <div class="child">somemoretext somemoretext somemoretext somemoretext</div> <div class="child">sometext</div> </div> </body> </html>
this is done with flex as ur jsfiddle. 这是通过flex作为你的jsfiddle来完成的。 u can do it also easier with "parent display table and vertical align middle" and "child display table cell and van middle" removing ur flex styles. 你可以通过“父显示表和垂直对齐中间”和“子显示表格单元格和面板中间”删除你的flex样式更容易。
解决方案2
2 2015-12-18 00:16:49
If you do not care that divs with multiple lines of text adjust their height to actual text content, use height:100% on your child elements. 如果您不关心具有多行文本的div将其高度调整为实际文本内容，请在child元素上使用height:100% 。
If you need all your content to stay the same height, add 如果您需要所有内容保持相同的高度，请添加
// Use any fixed value
line-height: 50px;
height: 50px;
If you need to change your fixed height in pixels whenver your window is resized, just use javascript to change the CSS rule (if using this method read this first to not slow down your client when the window gets changed). 如果您需要在调整窗口大小时更改固定高度（以像素为单位），只需使用javascript更改CSS规则（如果使用此方法，请首先阅读此内容，以便在窗口更改时不会降低客户端的速度）。
解决方案3
1 2015-12-17 23:56:19
Have you tried: 你有没有尝试过：
margin:0 auto; 保证金：0自动;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.