I am using wordpress to dynamically display images. Each image has a fixed width of 186 px and variable height, depending on the proportions of the image. Each image sits in a square box, with 15px padding. By default, the images appear at the top of the box. I am looking for a way to vertically center the image, given its fixed width, but variable height. Here is my code:
HTML:
<div class="logoContainer">
<img src="/path/to/image.jpg" />
</div>
CSS:
.logoContainer {
padding: 15px;
background: #dddddc;
margin-bottom: 10px;
width: 186px;
height: 186px;
}
.logoContainer img {
max-width: 100%;
height: auto;
}
I could use absolute positioning, but without knowing the exact height of the image, it would be difficult to perfectly center. BUT, we do know the exact dimensions of the container box. Thoughts?
Try this - http://jsfiddle.net/vLbRF/
.logoContainer {
padding:15px;
background:#dddddc;
margin-bottom: 10px;
width:186px;
height:186px;
line-height: 186px;
}
.logoContainer img {
max-width: 100%;
vertical-align: middle;
}
Using this technique which implements vertical-align will allow you to have dynamic-height containers:
<div class="logoContainer">
<span></span><img src="/path/to/image.jpg" />
</div>
CSS:
.logoContainer {
padding:15px;
background:#dddddc;
margin-bottom: 10px;
width:186px;
height:186px; }
span {
height: 100%;
vertical-align: middle;
display: inline-block;
.logoContainer img {
vertical-align: middle;
display: inline-block; }
Related
I'm working on my portfolio site and having trouble getting my divs to size together.
Here it is: I have one body div, inside there are two child divs.
The body div should have max-height 100%, max-width: 100% so that it doesn't exceed the browser window.
The left div contains an image which I want to scale to the parent body div (max-height 100%, max-width 70%).
The right div contains text about the image, it needs to scale to the height of the left div (there is also footer that sits at the bottom of this div).
This shouldn't be so hard, its almost working but right now my image container (left div) is not being contained to the body div.
html,
body {
height: 100%;
}
.Info {
float: left;
width: 25%;
padding-left: 15px;
padding-top: 10px;
/*margin-left: 78%;*/
border-left: 1px black solid;
/*position: absolute;*/
}
.InfoText p {
margin-top: -10px;
}
div img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
float: left;
height: 100%;
max-width: 70%;
padding-right: 15px;
position: relative
}
section.ImageContainer img {
float: left;
object-fit: cover;
}
#SideQuote {
margin-top: 30px;
}
.StuffInBody {
position: relative;
padding-top: 15px;
float: left;
display: flex;
}
footer p {
position: absolute;
bottom: 0%;
margin: 0;
}
<div class="StuffInBody">
<div class="ImageContainer">
<img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
</div>
<div class="Info">
<div class="InfoText">
<p>ILLUSTRATION</p>
<p>Title: <em>The GMO Debate</em>
</p>
<p>Media: Gouache</p>
<div id="SideQuote">
<p class="ClickToEnlarge">Full screen image click here.
</p>
</div>
<footer>
<p>© Brooke Weiland 2015</p>
</footer>
</div>
</div>
</div>
It's very hard to make a reliable interface using floats.
It changes default behaviour and put your element outside of the flux.
You should be able to do what you want using only flex.
The property box-sizing: border-box also makes miracles (margin and padding easier to manage).
Also, the object-fit property is not enough supported by browsers to be used now IMHO.
http://caniuse.com/#feat=object-fit
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
<div class = "column2_SS">
<img class = "weather_widget" src = "images/weather.png" alt = "Smiley face">
</div>
CSS code:
.column2_SS{
background-color: #f2f7fc;
float: right;
height: 171px;
width: 300px;
background-color: black; /*#444444*/
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
vertical-align: bottom;}
.weather_widget{
vertical-align: bottom;}
vertical-align: bottom; doesn't work.
I need to align the weather widget image to the bottom. Any solution?
Find the attached image.
Edit:
I have set the background color of column2_SS to black. If the image is bottom aligned the background color should not be black. See the attached image. There is a black row under the image which means that image is not bottom aligned.
You can position an element in relation to its parent using position: absolute and playing with the top/bottom/left/right values. vertical-align works for inline elements or table cells mostly (read more on MDN).
.column2_SS {
background-color: #f2f7fc;
float: right;
height: 271px;
width: 300px;
background-color: black;
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
position: relative;
}
.weather_widget {
position: absolute;
bottom:0;
}
<div class="column2_SS">
<img class="weather_widget" src="http://i.stack.imgur.com/iU1rX.png" alt="Smiley face">
</div>
Well, there is one of the classic fixes for this on the web, creating table-look markup...
<div class="table">
<div class="table-cell">
<img src="path/to/your/img.jpg">
</div>
</div>
.table {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: bottom;
}
Also, absolute positioning will work fine, but I always use it as a last option, because of "jumping" behavior on some devices.
How do I make these 3 images fit to its parent div height while maintaining the image's aspect ratio?
<div id="myM">
<div class="ab">
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
</div>
</div>
css:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
}
.ab{
width: 100%;
float: right;
}
.cd{
max-height:33%;
width:auto;
}
Here is a Fiddle
I think the problem is with the float removing the container from the flow. Instead, you can make the container an inline-block and use right-align.
https://jsfiddle.net/9uyww2j0/2/
Without changing your HTML, my new CSS is this:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
text-align: right;
}
.ab {
display: inline-block; /* So text-align affects it */
height: 100%
}
.cd{
display: block; /* So takes full width */
height:33%;
}
I have the following html:
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
It has the following css:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
}
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
}
The image's margins aren't being set but its padding is. Also, when I set the margin to a specific value, the margins work. When I use the element inspector in Google Chrome, that line in the styles window doesn't have a line through it so I'm assuming it's valid css. I just can't figure out why it won't get set to auto.
You need to set the image to display:block;
demo http://jsfiddle.net/mCen7/
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
display: block;
}
I would appreciate you give us your actual objective.
As far as I understand, you simply want the img to be centered in your div.
img tags are inline tags, that is, share the behavior of a text or a letter. It's not a block, such as a div.
inline tags are horizontally centered like text, with a text-align: center style, as follows:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
text-align: center;
}
#image {
width: 300px;
height: 450px;
padding-top: 20px;
}
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>