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.
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>
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!
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>
Hi all on my page here: http://www.gamingonlinux.com/sales/ i want to align text in the added, price, savings and provider to the top, how would I go about that?
Here is the html for the columns:
<div class="row">
<div class="left">
{:screenshot} {:info}
</div>
<div class="date-column">
{:date}
</div>
<div class="price-column">
{:price}
</div>
<div class="middle">
{:savings}
</div>
<div class="right">
{:provider}
</div>
</div>
And their css:
.left
{
display: table-cell;
padding: 14px;
}
.price-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.date-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.middle
{
display: table-cell;
width: 75px;
padding: 14px;
}
.right
{
display: table-cell;
width: 155px;
padding: 14px;
}
Inside the "left" div the screenshot and name are inside floated left and right spans.
Just like on a regular table cell you can use vertical-align:top; to do the alignment.
You just have to add float: left; to your css (.left class) like this
.left
{
display: table-cell;
padding: 14px;
float: left;
}
Easy fix:
.row > div {
vertical-align: top;
}
If I understand your problem try this code. vertical-align is good choice:
display: table-cell;
padding: 10px;
width: 150px;
text-align: center;
vertical-align: top;
More other options for vertical-align is:
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.