I have a div with <img> and <a> in it.
But I have problem to align them vertically middle. I have tried to use floats, absolute positioning and other stuff but nothing has effect.
<div id="hoverDiv">
<img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
TestAccount
<div class="showme">
<ul id="menuAccountItemList">
<li>...
</ul>
</div>
</div>
img {
vertical-align:middle;
}
Here's a jsFiddle example (border added to show alignment).
Related
I have the following Code. All elements should be in the same line in my header, so I've put them all to inline-blocks.
Now they all move down a bit because of the height of the picture.
If I move down the picture a bit with margin or padding the whole line moves down.
What would be the best approach to keep everything in a line and have the center of the picture be inline and not at the bottom as it is now?
<header>
<div id="headerBox">
<h1>hi</h1>
<p>hello<span>/</span> Pw <span>(ID123)</span></p>
<img src="plus.png" id="plus" />
<span id="kunden">Kunden/Projekt anlegen</span>
<input type="text" />
<img src="girl.png" id="girl">
<div id="navArrows">
<ul>
<li>Projektübersicht</li>
<li>Konfigurieren</li>
<li>Ergebnisse</li>
<li>Landingpage</li>
<li>Prüfen</li>
</ul>
</div>
</div>
</header>
To achieve this layout, one can use an unordered list with the CSS display property on each item set to inline-block.
<ul class="box">
<li>
<a href="#">
<img src="plus.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li>
<li>
<a href="#">
<img src="girl.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li><!-- more list items -->
</ul>
When the items have different heights, you’ll see some strange stacking issues. (The second item may be taller or shorter. With floats that fifth item catches on it.)
Instead of float, I give each list item a width and change the display from block to inline-block.
ul.box li {
width: 200px;
display: inline-block;
}
For more information about this styling, this tutorial may help:
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view
Hope this helps!
The solution to my Problem was the css attribute
vertical-align: text-top;
on the picture.
More about it here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
I am trying to make the captions appear centered below the images with the following code :
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="width:100px;text-align:center;">{text}</div>
</div>
</div>
However, the end result is that the text is centered indeed, but placing the beginning of the text in the center of the div, thus making the text appear to the right.
How can I prevent this?
You can remove the margin:18px and the width:100px of the div which contains the text, since its parent div already has width:100px:
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="text-align:center;">{text}</div>
</div>
Since you need to keep the caption center to the image, the width of div consisting the text should have same width as the img. and to make text center apply attribute align='center' to the div itself instead of giving css text-align:center
<img src="{src}" class="icon" />
<div align="center" style="width:width of image;">{text}</div>
This will solve your problem
How do I horizontally center a set of 4 images (one square block) inside a parent div with CSS? I also need the image block to occupy 100% of the screen vertically.
Thanks.
<div id="outer" style="width:100%">
<div id="photoBox" style="inline-block">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
You should use
display: inline-block instead of inline-block css stylesheet
Look here
What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)
I'm struggling for quite some time now with that.
I have 2 floated div and I'd like to align the text with the images inside these divs.
Here is a JSFiddle
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true">
<li data-icon="nf-arrow-r">
<div style="overflow:hidden;">
<div style="float:left;">
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />08h00 - 12h30
<br/>
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />13h00 - 18h00</div>
<div style="float:right;font-weight:normal;color:blue;">9h30 +
<img src='https://si0.twimg.com/profile_images/378800000050266964/cfbc5ac04a7ced31fcbb9dfcf1649d65.png' width='32' height='32' />
</div>
</div>
</li>
</ul>
</div>
You can solve this issue by
Wrapping the text content inside a <span> tag.
And then by adding vertical-align: bottom; to your <span> and <img> tags.
HTML:
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' /><span>08h00 - 12h30</span>
CSS:
img, span{
vertical-align: bottom;
}
Working Sample
Note: The working sample has border just to illustrate.
A simple solution would be using table and table-cell displays. I've colored the cells so it'll be clear.
jsFiddle Demo
I had to change some styles, but not the DOM.
<div style="font-weight:normal;color:blue;background:red;
vertical-align: middle; display: table-cell;
height:100%; text-align:right;">
Add this in all image tags.
style='vertical-align:middle;'
Demo