MDN says line-height work on inline elements. Images are inline elements. Then why doesn't line-height work on img elements? Here is the jsfiddle in which line-height doesn't center the image.
The page you link to says:
On replaced inline elements such as buttons or other input elements, line-height has no effect.
img elements are replaced inline elements, so line-height has no effect on them.
You need an extra element if you want to set the line height of a line box around an image.
span {
line-height: 200px;
}
div {
outline: solid black 1px;
}
<div>
Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt=""> </span> World
</div>
<div>
Hello
<img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="">World
</div>
You need to use line-height on div
.container {
width: 400px;
height: 400px;
border: 1px dotted black;
line-height: 400px;
}
<div class="container">
<img src="http://findicons.com/files/icons/2229/social_media_mini/48/google.png" alt="">
</div>
Related
I have user generated content that needs to scale to fit in the parent container.
I don't have control of anything inside the div.
.container {
max-width: 300px !important;
border: 1px solid black;
}
<div class="container">
<p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p>
<p>
Other content
</p>
<p>
CSS IS AWESOME
</p>
</div>
How to I keep the content bound?
So you have to specify for all children at any level have max-height of 100% of parent element :)
.container {
max-width: 300px;
border: 1px solid black;
}
.container *{
max-width:100%;
}
<div class="container">
<p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p>
<p>
Other content
</p>
<p>
CSS IS AWESOME
</p>
</div>
And I'd suggest you get rid of !important if nothing else is modifying element so CSS name would be justified for word Cascading :)
I'm not sure why you're setting the image width inline to a set pixel width, but this will ensure the image never exceeds the bounds of it's container:
CSS:
img {
max-width: 100% !important;
}
I am trying to align vertical some text in a div here:
HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
yo
</br>
yo
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle:
http://jsfiddle.net/4mVPG/1/
The height of my divs is fixed so all I want to do is set up a padding-top on the last div (.div12) to move the text down a bit. However when I add a padding-top all the box are brought down.
Why is this happening and how can I fix this? Thanks
When you use inline-block, each block acts as if it where text that gets alined (by default) on the baseline. If you increase the height of the second block, the baseline goes down, and the first block as well.
You can use vertical-align: top to change this.
Just replace CSS with this:
.div1 {
height: 40px;
}
.div1 > div {
float: left;
}
.div12 {
padding: 0 0 0 3px;
}
The div1 div selector also applies to all descendants so using > only applies to first one. Also if container is height fixed i think it's better to use float.
JSFidle
Hope it helps!
You can use ".div1 div {display: inline-block;vertical-align: top;}" and there is no need for .div12 { margin-top: 30px; } since you want both aligned top and no extra space on top of "Text div"
Also, just for a better practice, avoid using "<br>" tag, there are many "Block" tag like, <div>, <p> etc. and if there are list of "links" use "<ul><li>" and you can control the margins and spaces with CSS.
Here is the updated code :
HTML
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
</div>
<div class="div12">
<ul>
<li>yo
</li>
<li> yo
</li>
</ul>
</div>
</div>
CSS
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
vertical-align: top;
}
.div12 ul,
.div12 li{
margin:0;
padding:0;
list-style:none;
}
Working Fiddle for the same: http://jsfiddle.net/PK3UU/
Hope this is helpful!!!
Is it what you want ? http://jsfiddle.net/4mVPG/4/ i cleaned up css a little bit
div {
height: 40px;
display: inline-block;
vertical-align:middle;
}
and for html
<div class="div11">
<img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
yo
<br />
yo
</div>
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here
i created this jsFiddle and i wanted to know how could i adjust the <p> tag within the div so that the height is adjusted based on the text within and not for it to hide behind another div.
http://jsfiddle.net/qGzer/
<div class="nameImage">
<div class="gridLetter">
<div>A</div>
</div>
<figure class="thumbnail avatar circularGridVw">
<img alt="Gravatar" src="http://www.gravatar.com/avatar/4425027572854858d9ebc2fe1c2fd847?s=150&d=identicon&r=G">
</figure>
<p>Jackie ThunderBirdies James</p>
</div>
Hi Just set an height:auto. See your code here http://jsfiddle.net/qGzer/23/
.nameImage {
width:158px;
height:auto;
}
Also i set the float:left to display:inline-block to reserve spaces in case of different heights of the divs.
add this to css of div
position: absolute;
.gridLetter {
font-size: 20px;
font-weight: bold;
margin-top: 4px;
display: block;
height: 17.7px;
position: absolute;
}
http://jsfiddle.net/qGzer/1/
In your div you are limiting the height
I have a div tag, that contains images. The default seems to align images flush bottom, assuming different vertically sized images. How do I change the code, such that I get the images to align flush top?
Here is the complete HTML code.
CSS
#page {
position: relative;
padding: 0px 0px 0px 0px;
float: left;
border: none;
}
.divPortfolioImageRowFirst
{
display: table-row;
}
.divPortfolioImageCol1 {
vertical-align: top;
}
HTML
<div id="page">
<div>
<div id="divProductLogos">
<div class='divPortfolioImageRowFirst'>
<div class='divPortfolioImageCol1' style='line-height: 78px' id="divProductLogos_1">
<img style='margin-left: 0px;' src="./images/portfolio/ProductLogos_1.png"/>
<img style='margin-left: 15px;' src="./images/portfolio/ProductLogos_2.png"/>
</div>
</div>
</div>
</div>
</div>
The addition of "vertical-align: top;" and "line-height: 78px;" did not do the trick.
What did I forget / not do?
I think you want something like the following:
The HTML:
<div id="divProductLogos">
<div class='divPortfolioImageRowFirst'>
<div class='divPortfolioImageCol1'>
<img src="http://placekitten.com/150/200" />
<img src="http://placekitten.com/150/250" />
</div>
</div>
</div>
and the CSS:
.divPortfolioImageRowFirst {
border: 2px dotted gray;
padding: 10px;
}
.divPortfolioImageCol1 {
border: 1px dotted gray;
}
.divPortfolioImageCol1 img {
vertical-align: top;
}
Originally, you had too many floats affecting the layout, and that was causing some problems.
You could also use CSS table cells depending on other design considerations.
Demo fiddle: http://jsfiddle.net/audetwebdesign/9fhCS/
About the Vertical-align Property
The vertical-align property is not inherited, so it as to be applied to the inline elements that need to be adjusted. Specifying vertical-align on the parent container will not affect the child elements.
Reference: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
First, valign isn't a valid property, you should use vertical-align: top;
You will also need to set line-height to the height of the tallest image.