Menu
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:
.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;
}
640
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
Use line-height for vertical centering with a fixed height To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.
To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left and right alignment.
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. 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.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
