Elements doesn't align to centre when margin: 0 auto; applied.
See the code here. https://jsfiddle.net/helloworld123/vhhx1o7n/
I have to align the elements in centre of page(.entry-wrap should be aligned to centre of the page) and its children(.entry) should be floated to left.
I have this working to some extent in fiddle https://jsfiddle.net/helloworld123/n8o18ges/ ,but I don't want the elements in third row to be aligned to center.
<div class="entry-wrap">
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
</div>
body {
background: #f8f8f8;
}
.entry-wrap {
width: 500px;
height: auto;
margin: 0 auto;
background: #ccc;
padding: 10px;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
This is what I want to achieve
1.) On .entry, use display: inline-block; instead of float: left;
2.) On .entry-wrap use text-align: center;
https://jsfiddle.net/fe6cmr07/
First of all, all the elements inside entry-wrap are floated, so entry-wrap is collapsing, to fix it, you can add overflow:hidden to it, or use a clearfix solution.
If you want the child elements to be centered, it's just a matter of playing with the width of the wrapping div:
body {
background: #f8f8f8;
}
.entry-wrap {
width: 620px;
margin: 0 auto;
padding: 15px;
background: #ccc;
overflow: hidden;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
fiddle: https://jsfiddle.net/o8aj3hqL/
your block with margin: 0 auto is in the center of <body>. the problem is with the child elements since they are floated and it won't be center aligned unless you use display: inline-block instead of float: left
here is the fiddle https://jsfiddle.net/vhhx1o7n/1/
body {
background: #f8f8f8;
}
.entry-wrap {
width: 618px;
height: 318px;
margin: 0 auto;
background: #ccc;
padding: 10px;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
<div class="entry-wrap">
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
</div>
Related
I have been trying to center my container of images and have tried margin-left: auto; and margin-right: auto; in nearly everything related to the images.
Basically, I want it centered when I also scale down the page, it automatically moves some images down, but then I have a ton of blank space on the right side of my image.
Here is my HTML of my container:
<div id="sponsor-container">
<div id="row">
<div class="column">
<img src="images/isc.png">
<img src="images/kendall.png">
<img src="images/whaley.png">
<img src="images/drews.png">
</div>
<div class="column">
<img src="images/amfam.png">
<img src="images/body-zone.png">
<img src="images/whitelake.png">
<img src="images/townpump.png">
</div>
</div>
</div>
Here is my current css:
#row {
padding: 20px 20px 20px 20px;
}
img {
max-width: 100%;
}
.column {
padding: 15px 15px 15px 15px;
vertical-align: middle;
}
.column img {
padding: 15px 15px 15px 15px;
}
Change
vertical-align: middle;
to
text-align: center;
#row {
padding: 20px 20px 20px 20px;
}
img {
max-width: 100%;
}
.column {
padding: 15px 15px 15px 15px;
text-align: center;
}
.column img {
padding: 15px 15px 15px 15px;
}
<div id="sponsor-container">
<div id="row">
<div class="column">
<img src="images/isc.png">
<img src="images/kendall.png">
<img src="images/whaley.png">
<img src="images/drews.png">
</div>
<div class="column">
<img src="images/amfam.png">
<img src="images/body-zone.png">
<img src="images/whitelake.png">
<img src="images/townpump.png">
</div>
</div>
</div>
I am trying to center stack of divs 3 per row if browser window is biger than 1024 and if it is less than 1024 to show 2 divs in row but keep showing all 6 of them.
Currently i am having a problem to migrate what i have already found out as it doesn't really fit to the div.
Here is my previous example of how it was supposed to look but i did not tried to pack it into divs.
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:640px;
height:100%;
}
.image {
position: relative;
width: auto; /* for IE 6 */
max-height: 640px;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
bottom:-15px;
left: 0;
width: 600px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>
Here is what i tried to do with divs but it doesn't work the same way so i couldn't implement those properties.
body{
background-color:darkgrey;
}
.row{
left: 50%;
}
#media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
margin-right: 20px;height:auto; margin-bottom: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-word; /* non standard for webkit */
font-size: 2vw;
max-width: 100%;
max-height: 100%;
color:white;
}
<body>
<div class="row">
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>
Using floats and media queries you can achieve this result. I used flexbox to center a wrapper that contains all 6 divs so everything remains centered despite div width or viewport dimensions. Next you can float all inner divs left and use nth-child to target only the ones you want to clear which will determine your column number. Use a media-query to target a viewport wider than 1025pxand simply change your nth-child pseudoclass accordingly.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
align-items: center;
}
.wrapper {
overflow: hidden;
margin: auto;
padding: 0.75rem;
background-color: #eee;
}
div > div {
padding: 0.75rem 1.5rem;
margin: 0.5rem;
background-color: #ccc;
float:left;
}
div:nth-child( 4n ){
clear: left;
}
.note {
width: 100%;
padding: 1rem;
background-color: #000;
color: #eee;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
#media( max-width: 1025px ){
div:nth-child( 2n + 3 ){
clear: left;
}
div:nth-child( 4n ){
clear: none;
}
.note {
background-color: rgba( 0, 0, 0, 0.6 );
}
}
<div class="note">Resize viewport to change layout</div>
<div class="wrapper">
<div>div1</div> <div>div2</div> <div>div3</div>
<div>div4</div> <div>div5</div> <div>div6</div>
</div>
I have a logo (figure) for a website that I need to put on the same line as the h1 heading. Does anyone have suggestions? Here is something I recently tried:
figure {
float: left;
padding-left: 2px;
}
h1 {
text-align: center;
border: 3px solid: #FFA500;
border-radius: 15px;
box-shadow: 5px 5px 5px #828282;
}
header {
text-align: center;
letter-spacing: 1px;
height: 8em;
padding: 2em 10%;
}
<title>Kumquats</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<header>
<figure>
<a href="index.html">
<img src="img/kumquatlogo.gif" alt="kumquat logo" width="75" height="75">
</figure>
</a>
<h1>Kumquat Central</h1>
I want a logo image to be at the top of a webpage, next to an h1 element of text. The figure and the h1 are contained inside of a header, that is why I have header code there.
You also can try the following:
HTML:
<header>
<a href="index.html">
<img src="http://placeholder.cn/128/aaa" alt="kumquat logo" class="figure">
</a>
<h1>Kumquat Central</h1>
</header>
Then your CSS stylesheet. Also fixed your h1 border parameter that had errors.
h1 {
display: inline;
text-align: center;
border: 3px solid #FFA500;
border-radius: 15px;
box-shadow: 5px 5px 5px #828282;
}
header {
text-align: center;
letter-spacing: 1px;
height: 8em;
padding: 2em 10%;
}
.figure {
vertical-align:middle;
}
Since you did not share your html, here is a good way to do it https://jsfiddle.net/u97rggyy/5/
Actually this question should be marked as a duplicate of Vertically align text next to an image?
HTML
<!-- Case 1) text height is bigger than image height -->
<div>
<img class="img-valign" src="http://www.placehold.it/30x30" alt="" />
<span class="text1">some text1</span>
<img class="img-valign" src="http://www.placehold.it/20x20" alt="" />
<span class="text1">some text1</span>
</div>
<br/><br/><br/>
<!-- Case 2) image height is bigger than text height -->
<div>
<img class="img-valign" src="http://www.placehold.it/50x50" alt="" />
<span class="text2">some text2</span>
<img class="img-valign" src="http://www.placehold.it/70x70" alt="" />
<span class="text2">some text2</span>
</div>
CSS
.img-valign {
vertical-align: middle;
margin-bottom: 0.75em;
}
.text1 {
font-size: 44px;
}
.text2 {
font-size: 24px;
}
I'm having a (probably stupid) problem with floating div. I have each div sized at one or two-thirds of screen width (on wide enough displays).
Where I have a short 67% div floated left then a tall 33% div floated right then a short 67% div floated left, I'd expect the third div lined up immediately underneath the first with the second continuing down to its right, as at http://jsfiddle.net/BluefireAdz/bqdpfv8w/
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
<br />
<br />
<br />
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff; ">
<br />
</div>
However, something (probably in my CSS) is pushing it down so that it only starts at the bottom of the second div, as at http://jsfiddle.net/BluefireAdz/9bho8s5b/ (code made as clean as I can easily make it and still having the problem).
<div class="w67" style="background-color: #aaaa00; ">
<h1>Title</h1>
</div>
<div class="w67" style="background-color: #aa0000; ">
<div class="b3_vplayer">
<div class="embed-container">
<iframe src="http://www.youtube.com/embed/06olHmcJjS0?autoplay=0&rel=0&theme=light" style="border: 0; "></iframe>
</div>
</div>
</div>
<div class="w33" style="background-color: #00aa00; ">
<img src="http://www.killersites.com0killerSites/resources/dot_clear.gif" alt="Image 1" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
<img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" alt="Image 2" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
</div>
<div class="w67" style="background-color: #0000aa; ">
<p>Lorem Ipsum</p>
</div>
Have tried in Edge, IE and Firefox and get the same results.
See my updated fiddle here: http://jsfiddle.net/9bho8s5b/1/
Basically I just brought the floated right div before the other divs.
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
<br />
<br />
<br />
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff;">
<br />
</div>
Update your code in this fiddle
http://jsfiddle.net/9bho8s5b/2/
HTML:
<div style="float:left; width: 67%;">
<div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aaaa00; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aa0000; color: #ffffff; ">
<br />
</div>
</div>
You can wrap your first two div's in another div which is of 67% width and the internal divs which take full width.
You can change up your HTML so that the div that is set to float:right appears first, followed by the 3 float:left.
Here is a fiddle.
Solved it - I wasn't actually floating the w33 div to the right! Have added float: right to the inline style and now it all floats as hoped for!
I'm trying to create some fluid images that are aligned side by side but should also be vertically aligned in the middle no matter what there height dimensions are, I've set the images to have a max-width: 100% so they stay within their parents max-width so I can reduce these in size at smaller screen widths. My problem however is that I'm not sure of the best way to vertically align these images, can anyone advise?
CSS
.img-ctn {
display: inline-block;
margin-right: 3%;
max-width: 120px;
background: #cecece;
}
.img-ctn > img {
display: block;
height: auto;
max-width: 100%;
min-width: 100%;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/xmJ3R/
I think this is what you're asking for.
.container > div {
display: inline;
}
.container img {
max-width: 100%;
vertical-align: middle;
}
<div class="container">
<div>
<img src="http://lorempixel.com/100/75/" />
</div>
<div>
<img src="http://lorempixel.com/100/175/" />
</div>
<div>
<img src="http://lorempixel.com/100/25/" />
</div>
<div>
<img src="http://lorempixel.com/150/125/" />
</div>
</div>
And with your code.
* {
padding: 0;
margin: 0;
}
body {
padding: 20px;
}
.ctn {
width: 100%;
text-align: center;
}
.img-ctn {
display: inline;
margin-right: 3%;
max-width: 120px;
background: #cecece;
font-size: 0;
}
.img-ctn > img {
max-width: 100%;
vertical-align: middle;
}
<div class="ctn">
<p class="img-ctn">
<img src="http://dummyimage.com/80x65/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/100x30/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/70x10/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/30x40/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/50x65/000/fff" alt="" />
</p>
</div>
Try applying display:table-cell; to the image wrappers, then set padding:3%; instead of margin:
Demo:
http://jsfiddle.net/xmJ3R/
.img-ctn {
display: table-cell;
max-width: 120px;
background: #cecece;
vertical-align:middle;
padding:3%;
}
or set the margin on the images inside.