So, I need to get 2 images next to each other, but centered. I've gotten to figure out how to center an image, but not how to center two of them. The problem is in the CSS with display: block;, and display: inline-block; doesn't work - it's as if it's simply inline.
My code to center one image:
CSS:
img {
margin: 0px auto;
display: block;
}
HTML:
<h1>This Week's Photo Features</h1>
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
Use CSS.
<div style="text-align:center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
The previous answers are more-or-less correct, one solution is to put the images in a container and center the container:
div {
margin: 0 auto;
width: 220px;
}
Here's a fiddle to better demonstrate:
https://jsfiddle.net/boa5rej1/
Place both images in a container and center that container like this
<div align="center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
You can use Almost any container you like.
Related
I added a picture to my webpage and wanted it to be aligned in the center. I wrote this:
<img src= "kuwait-city.jpg" alt="Kuwait" align="middle" style="width:700px;height:450px;">
but my image would end up on the left. I tried aligning it to the right just to check and it works fine, so I don't know why 'middle' does not work.
how might I fix this problem?
To center an element horizontally, use the property center:
<div align="center">
<img src="kuwait-city.jpg" alt="Kuwait" style="width: 700px; height: 450px;">
</div>
The property middle is used for vertical alignment.
Or you can set both, margin-left and margin-right, to the value auto:
<img src="kuwait-city.jpg" alt="Kuwait" style="width: 700px; height: 450px; display: block; margin-left: auto; margin-right: auto;">
This will as well center your image. Note the additional display: block.
There also is a short form to set left and right margin at once:
<img src="kuwait-city.jpg" alt="Kuwait" style="width: 700px; height: 450px; display: block; margin: 0 auto;">
The align attribute in HTML5 is specific to certain tags only, it used to align the content of an HTML tag (not the tag itself), and is mostly for table data, not general layout.
Source: http://w3schools-fa.ir/tags/att_div_align.html
Source: https://www.w3resource.com/html/attributes/html-align-attribute.php
Your code may work if you specify a lower HTML version in your DOCTYPE and HTML tags. However you would be using code that is likely to break in the near future, so I would advise against that.
The modern way of aligning items is to use CSS. There are several techniques you can use, including using text-align: center when your child items have a display of inline or inline-block:
<div style="text-align: center;">
<img src="kuwait-city.jpg" alt="Kuwait" style="width:700px;height:450px; display:inline;" />
</div>
Using margin: auto, which expands margin on the left and right side making it center align:
<div>
<img src="kuwait-city.jpg" alt="Kuwait" style="width:700px;height:450px; margin: auto;" />
</div>
And the new flexbox CSS rules in combination with align-items: center:
<div style="display: flex; align-items: center;">
<img src="kuwait-city.jpg" alt="Kuwait" style="width:700px;height:450px;" />
</div>
There are actually quite a few more CSS techniques you can use, however I believe the above should be enough to get you started.
I recommend using CSS for alignment.
img
{
position:relative;
top:0;
left:50%;
transform:translateX(-50%);
}
or use a flex container in css
<div class="container">
<img src= "kuwait-city.jpg" alt="Kuwait">
</div>
div.container
{
width:100%;
height:auto;
display:flex;
flex-direction:row;
justify-content:center;
}
img
{
width:700px;
height:450px;
}
or you can also set margin:0px auto; on the image tag, which basically divides margin equally on both sides which will center the image tag horizontally.
Working in a Wordpress post, I want to add two images side-by-side and keep the block of images centered (one is aligned left, the other right). (That on its own I've got.)
When the page size is smaller, I want the images to stack. (That I've got.)
But the images aren't then centered in the page in this responsive mode. First one is left and the other right.
I've played with different image alignments through WP, but I can't get the combination to work.
Here's my html:
<div class="ps-image-container">
<div class="ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
and css:
.ps-image-container {
display: block;
/*width: 98%;
margin: 0 auto;*/
}
.ps-inner-image-container {
/*display: block;*/
width: 98%;
margin: 0 auto;
}
.ps-image-container::after {
content: "";
display: table;
clear: both;
}
.ps-responsive {
width: 49.99999%;
float: left;
}
#media only screen and (max-width: 500px){
.ps-responsive {
width: 100%;
}
}
There is some key concept that I'm missing.
If I understand your goal correctly, you want to do two things with your responsive layout:
Switch the image containers (.ps-responsive) between 50% and 100% widths so they go from being side-by-side to stacked (they can stay floated left)
Switch the text-align property of these containers between left/right and centred so the images inside them will go from the inner edges of these containers to the center.
It looks like you're close but you don't need so much code. See this fiddle for a working example: https://jsfiddle.net/ds2vuqng/26/
You can clear the float's in css by:
clear:both;
You can also use Bootstrap to fix this and using the container and text-center as a part of you class in ps-inner-image-container like:
<div class="row ps-image-container">
<div class="container text-center ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
I'm not sure if this will fix your problem otherwise write again :-)
I'm just trying to align some text on the same line, my CSS is this:
#logo {
width: 600px;
margin: auto;
margin-top: 250px;
}
And my code:
<div id="logo">Text Here
<div align="right">Text There</div>
</div>
this is what it shows:
would you guys happen to know what it is that I'm doing wrong? I tried inline styling for the second div, for a padding: 0; and margin: 0; but didn't work.
I just want it to be on the same line, but adjusted on the right. Thanks for all suggestions.
Place divs side-by-side in a container
<div style="width:600px;">
<div id="logo">Text Here</div>
<div style="float:right;">Text There</div>
</div>
Then add display:inline-block; CSS property to both the divs.
Fiddle
divs are automatically set to be in 'block' format, which means they will not allow anything to align with them.
To fix your problem, but this code in the div tag with 'align="right"':
style="display: inline;"
I have a div and I want to add a logo in its middle. If I write:
<div id="header">
<img id="logo" src="img/logo.png" title="Logo" />
</div>
#logo {
margin: 0 auto 0 auto;
width: 278px;
}
Nothing happens.
But if I make a special div for the image, like this:
<div id="header">
<div id = "logo">
<img src="img/logo.png" title="Logo" />
</div>
</div>
#logo {
margin: 0 auto 0 auto;
width: 278px;
}
It works, and the image is centered. Why?
Images are inline by default, so they won't respect that margin: auto off the bat. What you can do (without the extra div) is give text-align: center to the #header.
The reason the auxiliary div works is because you are wrapping the image in a div with the same dimensions, and being a block element, the div will respect margin auto and center itself.
this post may give you some help
It explains to you why you need wrap a div and how to do it without a div wrapper(but may have browser compatible issue)
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.