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
Related
I want three divisions side bu side with the middle explanding and the other two positioned at the ends. So here is what I tried. The padding rule disturbs the positioning but its necessary. I want approach which works in all major browsers(So ruling out flexbox)
.Button {
width: 80%; /*Useless Rule*/
}
.Button > .left {
float: left;
background-color: blue;
padding: 5px;
}
.Button > .right {
float: right;
background-color: red;
padding: 5px;
}
.Button> .middle {
width: 100%;
background-color: green;
padding: 5px;
}
<html>
<body>
<div class="Button">
<div class="left"><</div>
<div class="right">></div>
<div class="middle">Middle</div>
</div>
</body>
</html>
I like to use the display: table on the parent, and the display: table-cell on the children. Then give the first and third child a width of 1px. It will then be only as width as its content.
.button {
display: table;
width: 100%;
}
.button>div {
display: table-cell;
text-align: center;
background: lightblue;
}
.button>div:nth-child(1),
.button>div:nth-child(3) {
width: 1px;
background: lightgreen;
}
<div class="button">
<div><</div>
<div>Middle</div>
<div>></div>
</div>
So I have a variable number of elements in a div that has a variable width. The elements inside have a fixed space between them, 5px, but each one needs to expand to fill the full width of the space of the outer div with padding, so the text can be centerized.
Example:
.button-container{
width: 100%;
height: 50px;
}
.button-container .button{
min-width: 75px;
display: inline-block;
text-align: center;
border: 1px solid #FF0000;
}
.button-container .button + .button-container .button{
margin-left: 5px;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
So how can I make the padding inside of the button class elements have a dynamic left and right padding to fill the space of the button-container class div?
Ideally, the solution will be a CSS only solution, as I don't want to have jQuery to do the spacing.
CSS tables would work here.
.button-container {
width: 100%;
height: 50px;
display: table;
border-collapse: separate;
border-spacing: 5px;
}
.button-container .button {
display: table-cell;
text-align: center;
border: 1px solid #FF0000;
vertical-align: middle;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
You can use flexbox:
.button-container {
display: flex; /* Magic begins */
}
.button-container > .button {
flex: 1; /* Distribute the width equally */
text-align: center;
margin-left: 5px;
border: 1px solid #FF0000;
}
.button-container > .button:first-child {
margin-left: 0;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
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
when I delete the vertical-align in div.content:before selector, the text will pull down and can't show completely, so what's the pseudo class do and why this works?
PS: Is there any other way to implement like the demo shows, namely align the text in the middle and text will begin in a new line if it is too long.
here is the demo: http://jsfiddle.net/yougen/8WhNZ/
html:
<div class="wrapper">
<div class="content">
<span>Mix Color Lace Dress</span>
</div>
</div>
css:
div.wrapper {
position: relative;
width:120px;
}
div.content {
width: 120px;
height: 80px;
text-align: center;
background: rgba(51,51,51,0.5);
}
div.content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
div.content span {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
color: white;
}
The before pseudo element is just at the left of your real content. Its function is to have a 100% of the height of the container and precisely has a vertical-align: middle to force every element on the same line (in this case, your span) with the same vertical-align: middle to be shown in the middle of the container, although it hasn't the 100% of the height.
This trick is used when you don't know the height of the element that you want to align in the middle. In other cases you can play with vertical margins, for example, but here we need a pseudoelement with a known height (100% of the container).
Look at that: http://jsfiddle.net/7hUqs/
#element-1 {
height: 50px;
background-color: blue;
vertical-align: middle;
}
#element-2 {
height: 100px;
background-color: yellow;
vertical-align: top;
}
#element-3 {
height: 70px;
background-color: green;
vertical-align: middle;
}
#element-4 {
height: 80px;
background-color: pink;
vertical-align: middle;
}
The vertical-align: middle works with the silbing elements that have the same came of vertical-align. All of them, as a block, will be aligned with the other elements of the line and its vertical alignement (in this case, top). And the height of the line is the maximum height of its elements, not the height of the container. A little weird, but this is the thing.
try this
div.content:before {
content:'';
display: inline;
height: 100%;
margin-top:10px;
margin-right: -0.25em;
}
div.content span {
display: inline;
width: 80px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
color: white;
}
fiddle demo
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/