I have been trying out with div overflows. And I am encountering the problem that the div is not displaying 'normally'. This is a simple HTML and CSS and I hope someone can explain me the problem?
I was expecting that the boxes to be displaying in the same line.
<div class='content'>
<div class='box'>
hihi
</div>
<div class='box'>
</div>
</div>
...
http://codepen.io/ycmjason/pen/xbXpmV/
You are missing vertical-align: top; property on box class.
It should be:
.box{
display:inline-block;
**vertical-align: top;**
width:50px;
height:50px;
margin-left:15px;
background: #55CC55;
}
The default vertical align value for a div is baseline, this means, the box moves to the bottom as soon as you write text in it. If there's no text, there is no baseline to be aligned to, so they just hop on the top. To fix it add vertical-align: top; to your .box.
Related
.floral-icon {
vertical-align: middle;
float: left;
}
<div id="heading">
<div id="colD"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
<div id="colE"><p>Lewis</p></div>
<div id="colF"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
</div>
I am trying to align an icon on both sides of a single word heading. I want it to align in the middle vertically and on the right side to the left of the heading and on the left side to the right of the heading, so that the icon abuts up to the heading on either side. When I leave off the float property to align it left or right, the icon lines up correct vertically. When I add the float the icon jumps up to the top and is not aligning correctly in the vertical position. What am I doing wrong? Thanks.
forget about float and vertical align, it's an old tricks. try the flex, it's a new one.
put a wrapper before your icons and set display flex.
this is some simple example from me, you should improve it by your self
.wrap{
width:100%;
height:250px;
background:yellow;
display:flex;
align-items:center;
justify-content:flex-end;
flex-direction:row;
}
.icons{
width:50px;
height:50px;}
.icons img{
width:100%;}
<div class='wrap'>
<div class='icons'><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-natural-wonders/050386-blue-metallic-orb-icon-natural-wonders-flower9.png"></div>
<div class='icons'><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-natural-wonders/050386-blue-metallic-orb-icon-natural-wonders-flower9.png"></div>
</div>
you can find it more in this link css Tricks
wish, it would help you out. ask me more, if you still don't get it.
I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!
I have the following layout: fiddle.
<div>
<div class="left">
<div>label not aligned</div>
</div>
<div class="right">
<div><textarea></textarea></div>
</div>
</div>
<div>
<div class="left">
<div>label aligned</div>
</div>
<div class="right">
<div><input></input></div>
</div>
</div>
/*...css in the fiddle*/
In it you can see that there are 2 rows, one with a textarea and the other with an input for comparison. As you can see the first row's label is pushed down even if the line-height and height are the same as in the right column. In the 2nd row with the input you can see the behavior I was expecting where the label is essentially centered and in alignment with the input to the right. This occurs even if the textarea has resize none.
Does anyone know why this is happening? I know how to get it to work using float left but I wanted to know if there's a cleaner solution. Thanks in advance.
Add a vertical-align: top to your .left class like below:
.left{
border: 1px solid black;
vertical-align: top;
}
Updated Fiddle
jsFiddle: http://jsfiddle.net/2CRZP/
I want to put the grey box in the middle of the screen using vertical-align:middle or something (CSS).
<div class="container-fluid">
<div class="hero-unit">
<h1>Test</h1>
<p>stackoverflow</p>
<p>
<div class="row-fluid">
<div class="span2">BASE CSS</div>
</div>
</p>
</div>
</div>
http://jsfiddle.net/2CRZP/2/
You have to put this:
.container-fluid {
position:absolute;
top:50%;
margin-top:-160px;
}
In the margin-top you have the half of the height div in negative. (If you edit it)
And vertical-align:middle its only for TD tables. ;)
You mean the green box ?! I don't see any gray box
If you want to use vertical-align with divs, try the display:table-cell;
http://phrogz.net/css/vertical-align/
Hi have the following code appneded three times:
<div class="bio">
<div class="bio-icon"><img src="/images/icon_location.png" alt="Location" /></div>
<div class="bio-content">
<div class="bio-title">location:</div>
<div class="bio-text">' . $obj[0] . '</div>
</div>
</div>
In each case, the image inside bio-icon div is different (it is different width and height).
Basically, there would be an icon, with a text next to it. I want the text to be centered (vertically), but I don't know what to do since the icons each have different heights! What should I do?
Thanks
You can try this
.bio {
display:table;
}
.bio-icon, bio-content {
display:table-cell;
vertical-align:middle;
}
The only problem with this is IE7 doesn't recognize css table properties so you might have to use jquery to fix in IE7
you can use vertical-align property to center the text vertically w3 link here
For different size icon issue, use fixed width and height in css
.bio-icon
{
height:50px;
}
This will automatically resize your icon/image.