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>
Related
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-->
I need to center images inside of multiple divs. Everything I try breaks.
These are four boxes, alternating red & blue - horizontal. Looking to have them centered in the page and pushed to the top under another div block. Within each block is an image, which is centered to the same % margin on all sides to the relative red or blue box. You can see below I tried both placing the image directly in a redbox/bluebox div or even going one layer deeper with a box just for the image.
4 Box Example - HTML:
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="images/2.png">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="images/3.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="images/4.png">
</div>
</div>
CSS:
box-container {
height: 900px;
width: 950px;
padding: 12px;
display: inline-block;
vertical-align: top;
margin-left: auto;
}
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
}
.thumbnail img {
display: block;
margin: auto;
height: 130px;
width: 150px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
You need to add padding to the image based on the height of your thumbnail div.
.thumbnail img {
display: block;
height: 130px;
width: 150px;
padding: 10px;
}
.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
display: block;
margin: 0 auto;
}
or
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
text-align: center;
}
using flexbox
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
display: flex;
align-items: center;
justify-content: center;
}
I believe I have what you are looking for in this here JSFiddle I just wipped up: https://jsfiddle.net/9yLspwr6/5/
A few key points before the code...
In order to have all the div elements 'float' left you ahve to apply div.className{float:left;} This will ensure divs float left to right and wrap around if they run out of space (much like a paragraph of text). More on CSS float property here: https://www.w3schools.com/css/css_float.asp
Vertical margin does not support 'margin:auto;' like it does for horizontal. Margin can be defined by div.ClassName{margin: 0px 0px 0px 0px;} OR div.className{margin:0px auto;}. The first element this way is for top/bottom margin. The second is for left/right margin. I had to use a little math to vertically center your images, but it gets you what you need. Here is some good documentation on margin: https://www.w3schools.com/cssref/pr_margin.asp
Cleaned up the HTML and removed some CSS no longer needed. I did this to simplify the code while maintaining the solution. If you drop this code into a site you'll want to ensure you only target only the appropriate tags. For example - my code is targeting ALL img tags. You would want to put a class or ID on the IMG tags you want and then ensure that is reflected in the CSS.
I modified the HTML quite a bit. Removed much of the unnecessary elements that were in place for troubleshooting.
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<img src="images/2.png">
</div>
<div class="bluebox">
<img src="images/3.jpg">
</div>
<div class="redbox">
<img src="images/4.png">
</div>
Modified CSS below:
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
float:left; // new. essentially left justifies the divs.
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
float:left; // new
}
img { // simplified the target. wrap entire contents of the HTML with a different DIV id to target only images within that div
display: block;
margin: 10px auto; // added 10px. it will then apply 10px margin to top and bottom, auto on left/right
height: 130px;
width: 150px;
}
That should do it. Hope it helps!
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%;
}
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.
I have simple structure with container and inside boxes:
<div id="container">
<div class="block"></div>
// more blocks
<div class="block"></div>
</div>
What I would like to achieve is to center boxes inside this container but to pack them as much as possible in a one line. The same I can do using JS: http://jsfiddle.net/JhxSd/ but I would like to avoid that, and use only CSS. Is that possible?
#media queries
Use a set of #media queries to define different layouts for the grid based on the current screen size. The only part of the layout that needs to vary is the width of the grid wrapper.
For all practical purposes, this is the only CSS solution available at present. For an explanation of why #media queries are appropriate, and why other available CSS options won't work, see this answer.
JSFiddle Demo
The above demo has #media queries for screen sizes up to 1200px wide (more can be added as needed), and does not use JavaScript. The rendered width of #container is always 75% (not counting the border), and the grid is centered within #container.
Note: This solution requires adding a wrapper div around the blocks. In each #media query, the width of the wrapper is just enough to fit the number of columns appropriate for the current screen size. The fixed wrapper width is what allows the grid as a whole to be centered within #container. If editing the static HTML isn't an option, the wrapper div can be added when the page loads using jQuery.
HTML
<div id="container">
<div class="grid-wrapper">
<div class="block"></div>
...
</div>
</div>
CSS
#container {
width: 75%;
...
}
.grid-wrapper {
margin: 0 auto;
width: 70px; /* Default: 1 column */
}
#media (min-width: 200px) {
.grid-wrapper {width: 140px;} /* 2 columns */
}
#media (min-width: 290px) {
.grid-wrapper {width: 210px;} /* 3 columns */
}
...
I hope this will do the trick:
http://jsfiddle.net/CnjZR/1/
<div id="container">
<div id="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS:
#container {
width: 100%;
overflow: hidden;
background: red;
text-align: center;
}
.block {
width: 20px;
height: 20px;
background: blue;
float: left;
margin: 5px;
}
#wrap {
background: green;
overflow: hidden;
display: inline-block;
}
Not too sure if you where looking for something like 'flex-justify' , I added in the demo a turn around based on inline-boxes behavior and text-align values.
edit : point cleared: text-align:center ; is it.
http://jsfiddle.net/JhxSd/10/
The point is you should not use float, but display.
Float is not friendly with centering , nor vertical nor horizontal, since it is not standing in the natural flow of the document.
#container {
width: 75%;
border: 1px solid;
text-align:center;
overflow:hidden;
padding:1em 1em 0;
box-sizing:border-box;
float:left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
display:inline-block;
margin: 10px;
}
I think, everything you have almost done already.
#container {
width: 75%;
border: 1px solid;
float: left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin: 10px;
overflow: hidden;
}
http://jsfiddle.net/JhxSd/3/
Try this:
#container {
width: 75%;
border: 1px solid;
float: left;
overflow: hidden;
text-align: center;
}
#container .block {
display: inline-block;
width: 50px;
height: 50px;
background-color: blue;
margin: 10px;
}
If you truly need everything left-aligned then I think you're out of luck with just CSS.
You can use the text-align:justify for the container and use the display:inline-block for the div.block. but you need add some placeholder tag at the last.Like this:
HTML
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
CSS
.wrapper {
width: 75%;
border: 1px solid;
font-size: 0.1px;
text-align: justify;
}
.wrapper:after {
content:"";
display:inline-block;
width: 100%;
}
.wrapper div{
font-size: 16px;
display:inline-block;
*display: inline;
zoom:1;
color: #fff;
background-color:blue;
width: 50px;
height: 50px;
margin: 10px;
}
.wrapper .placeholder {
width: 50px;
height: 0px;
background:none;
}
Please view the demo. A detailed tutorial, please click here.