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.
Related
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!
Hi Everybody and tks in advance for your help... I'm looking for the best practice to resolve a simple question:
.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
How should I center the text vertically at the middle of the image (obviusly not using px in margin-top or bottom, because the width/height of the image will be dinamic).
Thanks!
You could use flexbox. See the example:
.main{
display: flex;
align-items: center;
}
https://jsfiddle.net/zb2ozq1k/1/
I'd get rid of float and use table-cells instead. Then, use vertical-align:middle for the text.
Like this:
.main{
display: inline-table;
border: 1px solid blue;
}
.left {
width: 79%;
margin-right: 1%;
display: table-cell;
border: 1px solid green;
}
.right {
width: 20%;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
h1 {
display: inline;
vertical-align:top;
}
<div class="middle">
<img src="http://placekitten.com/200/150" >
<h1>A TEXT</h1>
</div>
The input element seems to drag down the parent div. Why is this happening? How can I fix it?
The html
<div class="main">
<div class="one">
</div>
<div class="two">
<input type="text" /> <!-- Without this input, the page looks fine -->
</div>
<div class="three">
</div>
</div>
The css
.main>div {
display: inline-block;
height: 330px;
}
.one {
width: 18%;
background-color: #fbfbfb;
}
.two {
margin-left:10px;
width: 50%;
border: 2px solid #ddd;
}
.three {
margin-left: 10px;
width: 20%;
background-color: #bbb;
border: 5px dashed #ddd;
}
Here is the effect: http://jsbin.com/gubozapove/edit?output
It is because you have given: display: inline-block;. To work around this, give:
vertical-align: top;
Preview
Reason: Inline Block elements tend to align to the baseline by default.
Fiddle: http://jsbin.com/kitazeweqi/1/edit?output
Add
vertical-align: text-top;
to your .main>div.
You can fix it adding float: left; to .one and .two
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 was looking if any one know how to interchange table cells positions using pure CSS. I have three divs similar to below
#content {
width: 1000px;
display: table;
float: none;
vertical-align: top;
border: 1px solid red;
}
#left {
float: left;
}
#right {
float: right;
}
#left, #right {
width: 200px;
display: table-cell;
right: 600px;
border: 1px solid grey;
}
#middle {
width: 600px;
display: table-cell;
float: left;
border: 1px solid grey;
margin-left: 200px
}
<div id="content">
<div id="left">some text and divs inside</div>
<div id="right">some text and divs inside</div>
<div id="middle">SOme more text and divs inside</div>
</div>
While loading the page, middle part flickers. So I am looking for a big help to interchange the positions of left and right using pure CSS.
Below code worked for me. Code concept took from Facebook after talking to David in comments. Thanks to him..
<div id="content">
<div id="left">some text and divs inside</div>
<div id="rightPart">
<div id="right">some text and divs inside</div>
<div id="middle">SOme more text and divs inside</div>
</div>
</div>
<style>
#content{
width: 1005px;
display: table;
float: none;
vertical-align: top;
border: 1px solid red;
}
#left{
float:none;
}
#right{
float:right;
}
#rightPart{
float: none;
vertical-align: top;
}
#left, #right{
width: 200px;
display: table-cell;
border: 1px solid grey;
vertical-align: top;
}
#middle{
width: 600px;
display: table-cell;
float: none;
border: 1px solid grey;
}
</style>