I am trying to horizontally center images of any width. (In other words, each image has a width that falls in a range between 100px and 1000px). The parent area is 712px wide.
Most solutions I've tried center the images left side at the 50% mark.
This margin-left:50%; transform:translate(-50%,0); will position the element in the middle of its container. Even container is smaller than image:
div { width:100%; overflow-x:hidden; border:1px solid }
div > img { margin-left:50%; transform:translate(-50%,0); vertical-align:middle; }
<div>
<img src="http://lorempixel.com/400/200/">
</div>
<div>
<img src="http://lorempixel.com/1000/600/sports/3/">
</div>
img {
display: block;
margin: 0 auto;
}
or:
div.your-block-wrapper {
text-align: center;
}
div.your-block-wrapper img {
display: block;
}
.ct {
position: relative;
width: 700px;
height: 700px;
margin: 0 auto;
overflow: hidden;
}
.ct img {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
z-index: 22;
}
<div class="ct">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg" alt="" />
</div>
Check this out:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This apparently is something that's been floating around some of my dev friends that they've been adopting. I will likely start giving this a shot. It's still CSS, it's clean and no script required. You can also vertically center (and other stuff, as well).
You could do it like this:
https://jsfiddle.net/46mdr2z6/1/
<div class="wrapper">
<div>
<img src="http://placehold.it/250x110">
</div>
<div>
<img src="http://placehold.it/150x150">
</div>
<div>
<img src="http://placehold.it/650x250">
</div>
<div>
<img src="http://placehold.it/850x350">
</div>
<div>
<img src="http://placehold.it/120x750">
</div>
<div>
<img src="http://placehold.it/520x270">
</div>
</div>
css:
.wrapper {
width: 712px
}
.wrapper > div{
text-align: center;
}
img {
max-width: 100%;
}
Related
Wanted to ask of potential methods for this scenario I've been trying to work on. I have a gallery container of two images that takes up 50% of the available width of the container.
Goal is to have a Logo centered in the middle (where there is a gap between two images) and have it mobile responsive as well.
What I have in mind: using Z-Index to stack the Logo in the middle of the two images however what I've been looking up so far has unfortunately not been of much usage.
#container {
position: relative:
max-width: 1700px;
margin: 0 auto;
text-align: center;
}
.box {
max-width: 500px;
width: 90%;
margin: 0 auto;
display: block;
}
#media (min-width: 980px) {
.box {
width: 50%;
padding: 0px 15px;
box-sizing: border-box;
float: left;
}
}
<div id="container">
<img src="images/picture01.png" class="box">
<img src="images/logo-center.png" class="box">
<img src="images/picture02.png" class="box">
</div>
use float:left and position:absolute for the logo.
something like this:
<div id="container">
<img style="width: 50%; float:left" src="https://static.bhphoto.com/images/images500x500/LEE_Filters_115R_Peacock_Blue_Color_Effect_1272910523000_688218.jpg" class="box">
<img style="position:absolute;margin-left: auto; margin-right: auto;left: 0;right: 0;" src="https://s2.coinmarketcap.com/static/img/coins/200x200/2076.png" class="box">
<img style="width: 50%;" src="https://static.bhphoto.com/images/images500x500/LEE_Filters_115R_Peacock_Blue_Color_Effect_1272910523000_688218.jpg" class="box">
</div>
So I'm either missing something or misunderstanding how this should work, and I'm near my wit's end.
I would like to have four columns. Each column will have an image and a div containing text. The image should fill the width of the column with any overflow hidden so that the entire height does not exceed 600px. The wrapper should be centered horizontally and everything should be responsive, as I will delete the right column depending on screen size.
My problems... when all four columns are displayed, my text divs are not as wide as the images. When I kill #column4, the text divs are the same width as the images, but then I can't center the wrapper on the page. And the image in #column1, at some screen widths, won't hide the overflow of the image, so part of it "sticks out" so that he column is taller than the others. sigh I'm obviously self-taught... poorly.
I've tried killing the float and changing the display, but each display option gives me odd vertical spacing.
Edited to include an image of all four columns. First, and most irritating, is that I cannot get the wrapper div centered on the page. Also, note the images and text boxes are different widths. (However, when the page is narrower and column4 is hidden, then the widths are the same.) Finally, I would like the image to fill the available space vertically (65% and 75% of the column) with the text divs to fill the remainder so that all columns are the same height.
CSS Fail
#dcwrapper {
width: 90%;
max-width: 1200px;
height: 600px;
margin: 10px 5%;
position: relative;
}
.column {
width: 24%;
margin-right: 1%;
float: left;
}
#text1 {
height: 35%;
width: 100%;
}
#text2 {
height: 25%;
width: 100%;
}
#text3 {
height: 25%;
width: 100%;
}
#text4 {
height: 35%;
width: 100%;
}
#image1 img {
max-height: 385px;
max-width: 295px;
overflow: hidden;
}
#image2 img {
max-height: 445px;
max-width: 295px;
overflow: hidden;
}
#image3 img {
max-height: 445px;
max-width: 295px;
overflow: hidden;
}
#image4 img {
max-height: 385px;
max-width: 295px;
overflow: hidden;
}
.txt {
border: solid 2px #799048;
border-radius: 4px;
padding: 5px;
}
.image65{
height:65%;
overflow:hidden;
}
.image75{
height:75%;
overflow:hidden;
}
/* HIDE COLUMNS AT WIDTHS */
#media only screen and (max-width: 1250px) {
#column4 {
display: none;
}
#image1 img {
max-width: 100%;
}
#image2 img {
max-width: 100%;
}
#image3 img {
max-width: 100%;
}
#image4 img {
max-width: 100%;
}
}
<div id="wrapper">
<div id="column1" class="column">
<div id="text1" class="txt">
These are our hours.
</div>
<!--end text1-->
<div id="image1" class="image65">
<img src="1a.jpg" />
</div>
</div>
<!--end column1-->
<div id="column2" class="column">
<div id="image2" class="image75">
<img src="2a.jpg" />
</div>
<div id="text2" class="txt">
We have a lot of different products now.
</div>
</div>
<!--end column2-->
<div id="column3" class="column">
<div id="text3" class="txt">
Yo, make an appointment!
</div>
<div id="image3" class="image75">
<img src="3a.jpg" />
</div>
</div>
<!--end column3-->
<div id="column4" class="column">
<div id="image4" class="image65">
<img src="4a.jpg" />
</div>
<div id="text4" class="txt">
Lookey what's new
</div>
</div>
<!--end column4-->
</div>
<!--end wrapper-->
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
How to center the text inside that box?
Here's how I want elements sorted out:
In a smaller screen, elements stack on top of each other, and the .text-box div, that contains the text I want to center, has a fixed height. For larger widths, the .text-box div should have a height igual to larger image's height minus shorter image's height
See the Fiddle here
HTML
<div id="wrapper">
<div class="box">
<img class="img-large" src="http://placekitten.com/900/800" alt=""/>
</div>
<div class="box">
<img src="http://placekitten.com/900/400" alt=""/>
</div>
<div class="box-text">
<div class="vcenter-outer">
<div class="vcenter-inner">
<p>center this text vertically</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
background: #ffeaea;
height: 100vh;
}
img {
width: 100%;
display: block;
}
.img-large {
height: 100vh;
width: auto;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
}
.box-text {
text-align: center;
background: yellow;
height: 100%;
}
#media only screen and (min-width: 768px) {
.box {
float: left;
width: 50%;
}
}
.vcenter-outer {
background: yellow;
display: table;
}
.vcenter-inner {
background: lightblue;
display: table-cell;
vertical-align: middle;
}
Why does the .text-box div span through the whole wrapper?
Basicly You could use display:flex and float together
.trio {
height:100vh;
width:100vh;
}
.trio>div {
float:left;
display:flex;
align-items:center;
justify-content:center;
width:50vh;
height:50vh;
box-shadow:inset 0 0 0 2px;
}
.trio .first {
height:100vh;
}
<div class="trio">
<div class="first">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
</div>
display:table works too with an extra level of div inbricated as you did , same idea: float + vh
codepen to play with
I have a responsive website with max-width set to 1000px, but I need to fit background picture that will overlap one of the divs and also place full page-width bottom borders to other divs.
The code i have is like this:
.container {
width: 100%;
max-width: 1000px;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 750px;
background: url(background.jpg) no-repeat top center;
margin: auto;
}
.line {
border-bottom: 1px solid black;
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main line" id="second">
</div><div class="container">
<div id="third">
</div>
</div>
</body>
I get the first div with correct width and bottom border going across the full page width, second div has got the background picture showing, but the max-width of 1000px does no longer apply. The bottom border is shown correctly (dividing second and third div) and the third div has got the correct max-width applied again.
What am I doing wrong/not doing to get the max-width for the second div?
YOUR SOLUTION
If the browser support of background-size property is good enough for you, you can use background-size: cover;. Check here or here to see browser support.
Here is the code snippet to show how it works. Be sure to position your background-image to center center if you want it to always be centered.
.container {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.line {
border-bottom: 1px solid black;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 250px;
background: url(http://lorempixel.com/250/250) no-repeat center center;
background-size: cover; /* This does the magic */
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main" id="second">
<div class="container">Put your content in here.</div>
</div>
<div class="line"></div>
<div class="container">
<div id="third">
</div>
</div>
<div class="line"></div>
</body>
LAST (BUT NOT LEAST)
You might want to check this great article about the state of responsive images in web design, that will help you if you are going into responsive web design: Responsive images done right.
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.