i have a div that has a specific height and the content inside adjusts according to height VERTICALLY now what i did is i added the property display-table; to the parent div and display: table-cell;vertical-align: middle; to the child div now what happens is my div is vertically aligned and looking good but the h1 inside the child i not exactly as centered aligned as the button i figured adding some padding top or margin top might solve the issue but it is not accepting either of these here's my code
html
<div class="all-smiles" id="parent">
<div id="child">
<div class="container" align="center">
<div class="row">
<h1>All Smiles Welcome</h1>
<button>BOOK AN APPOINTMENT</button>
</div>
</div>
</div>
</div>
css
#parent {
display: table;
width: 100%;
height: 250px;
}
.all-smiles {
background-color: #b7181c;
}
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
}
.all-smiles button {
padding: 12px;
background: 0;
color: white;
border: 1px solid #fff;
text-decoration: none;
font-family: young;
}
#child {
display: table-cell;
vertical-align: middle;
}
FIDDLE
You need to specify these two:
Vertical Alignment as middle
Line height and 1
Code:
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
vertical-align: middle;
line-height: 1;
}
Preview
Fiddle: https://jsfiddle.net/wd3sr2xv/
Related
I have a flex div with a div and a span, structure that I don't want to modify.
.Flex {
display: flex;
background: lightgray;
height: 300px;
}
.Square {
width: 30px;
height: 30px;
background: black;
}
.Text {
font-family: "Arial";
font-size: 40px;
background: tan;
}
<div class="Flex">
<div class="Square"></div>
<span class="Text">Title</span>
</div>
I'm trying to align the top of the "T" of the text with the top of the Flex div, something like the following image:
But I cant. align-content: flex-start will align all children to the top, but the text within the span will still have some distance to the top of the div.
How is possible to achieve this?
Add one property to your text's css: (you can modify this value according to the positioning of the text you would like, the higher, the more space the text has from the top edge)
line-height: 0.75;
.Flex {
display: flex;
background: lightgray;
height: 300px;
}
.Square {
width: 30px;
height: 30px;
background: black;
}
.Text {
font-family: "Arial";
font-size: 40px;
background: tan;
line-height: 0.75;
}
<div class="Flex">
<div class="Square"></div>
<span class="Text">Title</span>
</div>
Why my div <div class="two"> didint align verticaly at the middle event after i put vertical-align: middle;
Here's a FIDDLE
HTML :
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
CSS :
.main {
border: 1px solid;
display: inline-block;
}
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
}
.two {
display: inline-block;
width: 10px;
height: 10px;
background-color: cadetblue;
vertical-align: middle;
}
You need the vertical-align:middle on one, and two. That way the vertical middle of one is aligned with the vertical middle of two. You could also just put vertical-align:middle on one which will align its vertical middle position to the baseline vertical position of two.
jsFiddle example
Try this:
Add vertical-align:middle rule to .one class
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
vertical-align: middle; /* Adde Rule */
}
Fiddle
JSFiddle link
HTML:
<div id="va-m">
<img src="http://placehold.it/150x150">
<h1> vertical-align: middle </h1>
</div>
<div id="no-va">
<img src="http://placehold.it/150x150">
<h1> no vertical align </h1>
</div>
CSS:
div {
margin-top: 30px;
padding: 5px;
width: 500px;
height: 150px;
line-height: 200px;
background-color: blue;
}
#va-m img {
vertical-align: middle;
}
h1 {
display: inline;
}
img {
border-radius: 75px;
}
I'm trying to align the image and text vertically in the container div. However, I seem to either get the choice of aligning the image, or aligning the text. Using vertical-align: middle on the img tag pushes it out of the container. Why?
Change the height to auto
Fiddle
div {
margin-top: 30px;
padding: 5px;
width: 500px;
//height: 150px;
height: auto;
line-height: 200px;
background-color: blue;
}
Update: Use table and table-cell + vertical-align: middle
Fiddle
Is there a similar technique like float and clearfix but for vertical alignment.
I want to separate different elements (either inline or floating left) such that they are always aligned either to the top or bottom.
In this jsFiddle I want the red and the green to be horizontally aligned. I cannot change the CSS or the existing divs. I can only wrap .s1 and .s2
Ok.. If you know the class name you can do like this:
SEE DEMO 1
Here the css:
.s1 {
display: inline-block;
font-size: 10px;
height: 20px;
}
.s2 {
display: inline-block;
background: green;
font-size: 20px;
height: 20px;
}
.s3 {
background: red;
height: 20px;
}
/* PUT THIS IN AN EXTRA FILE OR UNDER THE ABOVE STYLE */
.s1 {
vertical-align: bottom;
}
.s2 {
vertical-align: middle;
}
Or if you can wrap the file you can float the div's like this:
SEE DEMO 2
HTML
<div class="wrap_1"> <!-- Wrap 1 -->
<div class="s1">
<div class="s3">asdf</div>
</div>
</div>
<div class="wrap_2"> <!-- Wrap 2 -->
<div class="s2">
<div>qwer</div>
</div>
</div>
CSS
.s1 {
display: inline-block;
font-size: 10px;
height: 20px;
}
.s2 {
display: inline-block;
background: green;
font-size: 20px;
height: 20px;
}
.s3 {
background: red;
height: 20px;
}
/* FLOAT THE DIV */
.wrap_1 div, .wrap_2 div {
float: left;
}
Let me know if solved your issue!
I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle