How to vertically align div inside another div using property vertical-align:middle.
Here is my code.
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
I referred and found giving parent table-cell property and child inline-block works but still not.
Html
Here you go.
Code Snippet:
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="hello">
hello
</div>
</div>
vertical-align works only for display: table-cell, in some browsers you should wrap parent with display: table
.hello {
height: 100px;
width: 100px;
}
.parent {
height: 400px;
width: 400px;
display: table-cell;
vertical-align: middle;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
Use vertical-align: middle on .parent and make .hello - display: block with margin: 0 auto, like:
.hello {
display: block;
margin: 0 auto;
}
.parent {
display: table-cell;
vertical-align: middle;
}
Have a look at the snippet below:
.hello{
height:100px;
width:100px;
background-color:black;
display: block;
margin: 0 auto;
color: white;
}
.parent{
height:400px;
width:400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
Hope this helps!
Related
I'm not sure what to do, I've tried using position, but it just aligns to the middle of the page, not the div.
I'm trying to align it vertically in the middle.
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
background-color: black;
display: inline-block;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
Wrap it in a flexbox container
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
display:flex;
align-items:center;
background-color: black;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
I'm trying to align div horizontally for far too long now.
The thing is, I set the width property but it doesn't seems to do anything.
.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
width: 100%;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}
<div class="vtab">
<div class="left big">Hello, Jean-Michel</div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span ></div>
</div>
Does anybody have a clue ?
The divs keep stacking on the left of the container div.
.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
display: table;
width: 100%;
box-sizing: border-box;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}
<div class="vtab">
<div class="left big"><span>Hello, Jean-Michel</span></div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span></div>
</div>
you can achieve that using display:flex; and align-items:center;
.vtab {
display: flex;
align-items: center;
}
How can I make this html structure
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
be displayed like this while div#1 and #2 have css float:left
( id names are integers only for demonstration purposes )
First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.
Here's a demo:
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:
#wrapper {
text-align: right;
}
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="wrapper">
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
</div>
If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.
HTML
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
CSS using inline-block (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
display: inline-block;
}
CSS using relative positioning (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
clear: both;
position: relative;
left: 220px;
top: -430px;
}
Fixed here - http://jsfiddle.net/3147og96/1/
html:
<div class="parent">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
css:
.parent {
height: auto;
width: 120px;
padding: 5px;
padding-left: 110px;
border: 1px solid red;
}
.parent div {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#one, #two {
float: left;
}
I have this code and the text is properly centered.
HTML
<div class="holder">
<img src="http://placehold.it/100x150/" style="float: left;" />
some text
</div>
CSS
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
display: table;
}
a {
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
}
http://jsfiddle.net/2P8Yj/1/
How can I make the text aligned to left, next to the image?
Add a width to your a:
a {
display: table-cell;
vertical-align: middle;
width:200px;
}
DEMO HERE
Try this http://jsfiddle.net/2P8Yj/18/
I have added the display: table to body the css is as follows
body{display:table}
.holder { border: 1px solid red; padding: 10px; width: 300px;display: table-row;}
a { display: table-cell;
vertical-align: middle; }
img { width: 100px;}
Instead of body you can have one more div above it.
Set your anchor to 100% and add some padding if needed:
a {
display: table-cell;
vertical-align: middle;
width: 100%;
padding-left: 15px;
}
Demo: http://jsfiddle.net/2P8Yj/20/
Try this JsFiddle: JsFiddle
This are the changes in your CSS, notice the height I have added to the .holder and the line-height to your a:
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
height:150px;
display: block;
}
a {
line-height:150px;
padding-left:20px;
}
img {
width: 100px;
}
You could put img and a each in a cell to create a "proper" table:
HTML:
<div class="holder">
<div class="cell">
<img src="http://placehold.it/100x150/" style="float: left;" />
</div>
<div class="cell">
some text
</div>
</div>
CSS:
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
display: table;
}
.cell {
display:table-cell;
vertical-align: middle;
text-align:left;
}
.cell:nth-child(1) {
width:105px; /*just to show, better to use padding for second cell*/
}
img {
width: 100px;
}
http://jsfiddle.net/2P8Yj/13/
Not sure if changing the display: table-cell; to display: inline-block; is ok in your situation.
But you can accomplish the same effect with this:
a {
display: inline-block;
vertical-align: middle;
}
img {
width: 100px;
display: inline-block;
vertical-align: middle;
}
Demo
You could add position:relative and left:-80px to your text CSS.
EXAMPLE
flaot:left; might solve your problem.
I'm trying to vertically center elements within a div, so per http://www.w3.org/Style/Examples/007/center.en.html, I set a min-height, vertical-align: middle and display: table-cell, but the text inside my div is still top-aligned.
<div id="fancybox-title-div" style="border: 1px solid black; min-height: 40px; display: table-cell; vertical-align: middle; width:50%; text-align: center; ">
<div style="height: 50px; float: left; width: 25px; background-color: blue"></div>
<div style="width: 70%">
<span>text</span><br><a href="'+link+'" >view comments</a>
</div>
</div>
Here's a jsFiddle for a visual:
http://jsfiddle.net/ccross59/gARYk/15/
What am I doing wrong?
My understanding and the way it has always worked for me is that display: table-cell has to be inside another element (like a div) with display: table.
Example:
http://jsfiddle.net/495Rm/
Example code:
div#top{
display:table;
height:100px;
border:1px solid red;
}
div#top{
display:table-cell;
vertical-align:middle;
}
Here's the solution from my comment: http://jsfiddle.net/thirtydot/gARYk/26/
HTML:
<div id="fancybox-title-div">
<div class="left"></div>
<div class="right">
<span>text</span><br /><a href="'+link+'" >view comments</a>
</div>
</div>
CSS:
#fancybox-title-div {
border: 1px solid black;
min-height: 40px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#fancybox-title-div .left {
display: inline-block;
vertical-align: middle;
height: 50px;
width: 25px;
background-color: blue;
}
#fancybox-title-div .right {
display: inline-block;
vertical-align: middle;
width: 70%;
border: 1px solid red;
}
If it matters, as it is this won't work in IE7. Here's a fixed version: http://jsfiddle.net/gARYk/27/
jsfiddle.net/gARYk/10 .... This is what you are looking for.