This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Centering image horizontally and vertically [duplicate]
(5 answers)
Closed 9 years ago.
I am trying to horizontally center a large image. Because I am using HTML5, I can't use <center>. I could use left:400px, but that wouldn't work for different screen sizes.
Wrap the image inside an element and use text-align: center;...
Demo
<div class="center">
<img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>
.center {
text-align: center;
}
Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property
img {
width: 276px;
display: block;
margin: auto;
}
Demo 2
Try this css to horizontally center
display: block;
margin: 0 auto;
= the top and bottom margin 0, and the left and right margin auto
Use CSS text-align: center;. And don't forget to set width on the div or it will look left-aligned.
<div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>
Depending on your specific situation, this has worked for me on several projects:
<style>
.outer{float: left; position: relative; left: 50%;}
.inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
<div class="inner">content you want to center, image, text, whatevs</div>
</div>
The IMG element is inline, by default. So, as the others have pointed, you have two options:
1) Keep it inline, and use text-align: center;.
2) Make it a block element with display: block;, and then use margin: auto;, which works only on block elements. I think this solution is better. Setting the width is just another way to force it to be a block element, but it's less obvious for someone that may read the code later. So explicitly setting the display type to block is better for readability.
If your element has the width property , then give it margin:auto;.
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.
Ideally, I would like to do this with a 100% CSS solution.
Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/
The basic CSS code is:
div {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid green;
width: 400px;
height: 300px;
}
Just add a new class
img
{
height:50%;
}
Change the percentage as you like.
try this..
<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
}
You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.
img {
height: 100%;
}
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
I’ve got an online photo gallery. The thumbnail page is a grid of 150px x 150px divs, the thumbnail images are set inside them.
Since the thumbnail images are rectangular, the ideal thing would be to auto-center them inside the divs.
Reading here, I’ve figured out how to center them horizontally. I’ve also been reading that auto-centering vertically isn’t possible until CSS3 takes off. Is this true?
I've gotten the horizontal images to auto center with this:
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
But, the vertical centering doesn't work with this:
.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}
If there's just no way to do this until CSS3 then I'll have to come up with a workaround, but if I'm missing something, please let me know.
Thank you all in advance for your help!
You have an inline element (the <img>) that is inside a sized parent <div> element:
<div>
<img />
</div>
All you need to do is to make it center and middle aligned. You center it with text-align:center; in the parent <div> and you middle align it by giving the <div> the line-height of it's full height. Additionally, as it's an <img> tag you give that image tag the vertical-align:middle; that done it's in there, regardless of it's own size:
Example/Demo:
<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
div img {vertical-align:middle;}
</style>
<div>
<img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
<img src="http://i.imgur.com/Az6NUl.jpg">
</div>
This is my relevant page markup:
<div id="header">
<div id="logo">
Home
</div>
<div id="user_box">
test
</div>
</div>
And my relevant CSS:
#header {
width: 960px;
height: 110px;
}
#logo {
background: url('/assets/img/logo.png') no-repeat center;
width: 300px;
height: 110px;
float: left;
}
#user_box {
width: 300px;
height: 60px;
float: right;
vertical-align: middle;
}
Now, I want to position the user_box div in the vertical middle of the header div. After a lot of Google'ing and experimenting, I have learned that this isn't easy. Apparently, I can't vertical align a block element such as a div. So I'm looking for a different way to do this.
I saw the hacky display: table; method and tried using it, but it didn't change a thing. Also tried changing the element to an inline element like a span, but that didn't work either. I even tried using margin: auto 0; for some god awful reason, and that also didn't work at all.
So I'm asking for help. How do I vertically align this div inside my header div?
Thanks!
Set the line-height of user_box equal to the height of header
Working demo: http://jsfiddle.net/AlienWebguy/pyppD/
vertical align doesn't work with divs its for aligning elements in tables. In your case you could just use this
#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/
So I fiddled around with your code a little bit, and here's what I got: http://jsfiddle.net/3k8XE/
As you can see I'm using a table as the header, and applying the same id to each element, except the two inner divs have changed to td's. I've added an inner td to compensate the space between the two divs since they were originally set to float:left/right.
(Of course the borders are just to show what's actually going on here.)
I'm looking to create a header like:
<div id="header>
<span class="left></span>
<span class="center"></span>
<span class="right></span>
</div>
So have a header that's all inline. the left to all the way to the left, the right is all the way to the right, and the center is in the center of the header.
The challenge is #header is fluid. Any CSS suggestions. right now the best way I can think to get this done is with a table with 3 rows.
Thanks
Try this:
http://jsfiddle.net/z7k3J/
If you adjust the spacer bar in the middle of the page, you will see that all of your "columns" stay appropriately aligned.
The key is that all of the columns' widths add up to 100% and you float them all to the left (or right, it doesn't really matter). When your widths are percentage-based, they will adjust appropriately as the parent changes size.
If you only care about the text being right/center/left (and not images, etc), you could also make all of the columns 100% width and absolutely positioned, and then just use text-alignment:
http://jsfiddle.net/h7qB8/
Is there a reason that floating the left and right spans won't work for you?
Can you re-order the HTML to be left/right/center (or right/left/center)? If so, float the columns and use margins or borders on the center to hold it off the side bars.
This would be a good start:
<div id="header" style="position:relative;width:100%;">
<div class="left" style="position:relative;width:200px;float:left;"></div>
<div class="center" style="position:relative;float:left;text-align:center;"></div>
<div class="right" style="position:relative;width:100px;float:right;"></div>
</div>
This will center everything in the middle div and keep the other 2 divs to the side. Make sure the element containing the header div is set to position:relative;width:100%; as well.
You can also use display: inline-block on the inner elements, on the outer container do a text align center, and then on .left float: left; .right float: right. This would allow you to set a width on the spans, but keep them evenly spaced from the center. See:
#header {
width: 100%;
text-align: center;
}
.left, .center, .right {
display: inline-block;
width: 100px;
border: 1px solid green;
}
.center {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
You don't mention it in your question but have it in your tag - if you're able to use CSS3 then the possibilities open up more. You can use the flex box layout: http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/ or css3 columns: https://developer.mozilla.org/en/CSS3_Columns