How to center an image horizontally and align it to the bottom of the container?
.image_block {
width: 175px;
height: 175px;
position: relative;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/* nothing specific */
}
explanation: an element positioned absolutely will be relative to the closest parent which has a non-static positioning. i'm assuming you're happy with how your .image_block
displays, so we can leave the relative positioning there.
as such, the <a>
element will be positioned relative to the .image_block
, which will give us the bottom alignment. then, we text-align: center
the <a>
element, and give it a 100% width so that it is the size of .image_block
.
the <img>
within <a>
will then center appropriately.
How to center image horizontally within a div element?
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
How to align an image at the bottom-center of the div
In order for .main
to have a height of 100%, you need to make sure that there is a height value computed for the containing block.
One way of doing this is to assign height: 100%
to both the html
and the body
tags.
A simple way to position the .cow
block element at the bottom of .main
is to use absolute positioning. First, set position: relative
to .main
to set the point of reference for positioning .cow
.
Apply position: absolute
to .cow
and set the bottom offset bottom: 0
and this will align the bottom edge of .cow
to the that of .main
. Absolute positioning will give a shrink-to-fit width by default, so set left: 0
and right: 0
to give .cow
the full width of .main
. This also takes care of any extra width due to any padding or margins added to .container
.
You may want to assign a minimum height for .main
to allow for enough space for the text, button and image. If you shrink the page enough, the absolute positioned element could overlap your text.
html,body { height: 100%; margin: 0;}.main { height: 100%; border: 1px dotted blue; position: relative; min-height: 500px;}.container { height: 100%; padding: 0 20px;}.main_text { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}.main_text h1 { padding-top: 10%; margin-top: 0px; font-weight: 400; font-size: 45px; margin-bottom: 0px;}.main_text p { width: 70%; font-size: 18px; font-weight: 400; line-height: 24px; margin-top: 25px; margin-bottom: 50px;}.buttons { display: flex; justify-content: center;}.button { text-align: center; margin: 0px 30px; color: #000; text-decoration: none; border: 3px solid #000; border-radius: 50px; padding: 10px 80px; transition: 0.3s background; font-size: 15px;}.button:hover { color: #fff; background: #000; transition: 0.3s background;}.cow { display: flex; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0;}.cow img { align-self: flex-end;}
<div class="main"> <div class="container">
<div class="main_text"> <h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1> <p>Invite me to Dribbble maybe? Thanks.</p> </div>
<div class="buttons"> <a href="mailto:hi@gauthamsk.com" class="button">Visit Profile</a> </div>
<div class="cow"> <img src="http://placehold.it/300x150"> </div>
</div></div>
HTML image bottom alignment inside DIV container
This is your code: http://jsfiddle.net/WSFnX/
Using display: table-cell
is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?
To fix the space at the bottom, add vertical-align: bottom
to the actual img
s:
http://jsfiddle.net/WSFnX/1/
Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?
So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/
How to make an image center (vertically & horizontally) inside a bigger div
Personally, I'd place it as the background image within the div, the CSS for that being:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Assumes a div with id="demo"
as you are already specifying height
and width
adding a background
shouldn't be an issue)
Let the browser take the strain.
How to align content of a div to the bottom
Relative+absolute positioning is your best bet:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}
<div id="header">
<h1>Title</h1>
<div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>
How to vertically align an image inside a div
The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
centre align container div and align text to bottom of div
.container{display:flex;}.column1, .column2{ width:200px; margin: 10px; border:solid 1px #ccc; flex-direction:column; }.column2{
justify-content:flex-end;display:flex;}#img{ max-width: 100%;
}p{ margin:0;}.container { width: 80%; padding-top: 100px; margin: 0 auto;
}
<div class="container"> <div class="img column1"> <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAdVBMVEXMzMwAAADPz8/S0tLU1NS4uLjDw8OMjIyrq6vHx8ezs7OmpqbBwcHX19dRUVGampp2dnavr69jY2OdnZ1eXl4aGhp+fn5sbGynp6dKSkp4eHg6Ojp/f39ERERmZmYhISEoKCgNDQ2Tk5NXV1cuLi43NzctLS2IdN5EAAAE4ElEQVR4nO3Ye3uqOBAHYCYJIILcrTfwAtrv/xF3wi1E291297T6PPt7/+jxoEYymSRDHAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf0RIJsTdxYcPfLvZv23i37X5Q4QTpmWZJpF1h14TTK9VtucPbJ3v3bFwm+kLyks2ZZ4WjpyuuFVepkXwElGQxYUOZXsjWs7uR9TkDv8VUU3rtrzRefmdGxYBkRpfp0R1nh+Imv6ScEqiuDzQpZCfN/FbVEUbT0mlROjNrvJNDzEQ3nq9WPEn3AN9JwiynmIgd9QIJaUK9uT3fa4pUdymV9LzgyBC8oc7nWdBRtUYA1lSJPv338/qoYHPKJ/ehhiIgorhixzbSLdZ0aK7IkRL3mdN/BZxblePFz1K3SEGwh2HzhFLSr6aCBzFohliII/raawDKnQTtJmiSfsnJwKngfvYLRWf1HJ4Q77RtDjKw26WCPNl/35TcZx1vvLHGJQmf1Y8K3RiTLNK5fT15PoRMq+l7oHVB+mTK8cYqGs8jdM8Ho7ThuaNZmMPpirXuplhLvjT1zg9uPcyN4nB8fhgFH6Tuux5qXKLpHDUeCdd9ospD2a5ylljVkVxpMXwjkootWIgE/6gGGPg8NQaoiEOtdDLZTyNPf/alyfYz4goFBXR6Uy0m+oDvUSMMbBukS8uzP2uNkMQuMeVlc8i0gutiYEsqAyU4GCf17ogCNazNcAj/6kx4NTMDpR4vJkX62GM1UZn7hQDq9uRNWayDwJnwZs9peWhm2G+qQ+WByoTf0dpVxMF825bAXkCsaVz3a8FQlxJ/ytDysQsBtk8BgE18zHjTNjKhyxw1L6b//MYKA4Cy93ux+yhP2+eG4OQaKxWOesrqau7vb7zL8Wgy4SC3uw+8FfC7qtTDIRbU5oFUdFSrX/u1WKQTmOodjflqLruC6IvzAW24nryLgs4UH2bUwy4jdzRj0dCue8X7/XmQjHdjUwvAVd3/dL48ZpoJYXGawFt7Ris2vd+dvHeOJRf13aaFAGV0u529Pw1MTQxqMjLqAk8LVhQxq/03ph+vpfzWuCnFM7HkUd/OTThk8N/9Y+Yb0ldQMt6N98bi6fGQM9MU+ikF/18Z4kcdZvVSNW8RuqyoFK8j8yDoA52C1fJUTGd7ArTuxopem4M1Nn0UMU35S5GDSX8965WvsXzvJf9pmgHQSzHFrKU+HVXK5nviITjatfKl2fXytU0ClzY8AIvBrpW7o6W5s9MW2tJVI3eSJyHIIx4bVnpIpyXlq05TDnqhTKg47hleE9/ZuLJEPdFslDtPNGnWpmL+/HZWZxOs9sVzVQa6SA85rPZFw6ncQOWWbe8cOizfu+QL/DszGXszl0ptXJjqx8mBryKX0LFn1jenaFcTV2gNrfHhDYxcOkcyu4Mxae6v1RTI7nRqH2BMxSuC9d0jeMznTLrPNHEQAQ7WsfxO53uHvDEhy/NNVMjeTE/j5Tllcwmc6TLrr0Rh/dP9eQ/EGKR5se3xd0Zb1CYmSGXVV7u7z/xj1yz6Sk32eT5vghmZ6r+sUzDb57T/piPT7n/wDm4dcjycLYuXuhsHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Nf8BZyMMUIZKGmqAAAAAElFTkSuQmCC"> </div> <div class="comment column2"> <p>a paragraph</p> <p>another paragraph</p> <p>another paragraph</p> <p>another paragraph</p> </div> </div>
Related Topics
Gaussian Blur Filter Causes Text Above The Affected Image It to Hide
Possible to Set Hex Color Opacity Independently
Nesting Element+Element Selector in SCSS
CSS Element Back to Default Style
Media Query CSS and Notepad++ Compatibility Issue
Set Chart Area Background Color in Rcharts/Slidify/Nvd3
CSS Absolute Positioned Elements and Margins
Javafx 8 - How to Change The Color of The Prompt Text of a Not Editable Combobox via CSS
Overriding Overflow-X CSS Property on iOS
Why Is Blue Circle Not Spinning in The Center of Itself
What Are Your Tips for Best Practice for Web Application Structure