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.
Related
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.
Full Source Located At: http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeComponent.html
Problem: There is an HTML div that is being used for a web page header, ultimately containing a table that has three columns for the left logo, a center title, and a right logo. I set the div width to "100%" in the CSS statement but the div is not dynamically expanding, in a horizontal direction, to fit the width of the window.
In short, the SVG canvas, further down in the page, requires a wider div and I'd like to get all the other full width divs to expand horizontally to keep things neater.
The div code looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_HeaderLeft"><img src="../../IMAGES/SITE_HEADERS/IF4IT_Logo.png" alt="Header Left Image" /></td>
<td><img src="../../IMAGES/SITE_HEADERS/Title_Gold_Shadow.png" alt="Header Center Image" /></td>
<td class="td_HeaderRight"><img src="../../IMAGES/SITE_HEADERS/NOUNZ_Logo_DarkBlueAndGold.png" alt="Header Left Image" /></td>
</tr>
</table>
</div>
The CSS statement being used is:
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
I've tried adding "overflow: auto;" as is recommended in this other SO post on the topic. However, it doesn't seem to work.
Any thoughts on how best to fix the issue?
You need to 0 out the padding and margin on the body element to prevent the browsers native stylesheets from applying those attributes which prevents you from having a true 100% width on your divs:
body {
margin:0px;
padding:0px;
}
The actual answer is partially explained in this article, titled: "Using CSS "Display: table-cell" for columns". However, it does not cover the full answer, either. The code, below, includes the full answer and has been tested.
The first part of the answer is to ensure that the entire html and body envelopes are given a baseline...
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
The second part of the answer is to create a full width div that will act as a container for the child divs. As mentioned in the above article, the containing div should be told to "act like an HTML table element" by using the "display: table;" attribute...
div#div_header_container {
background: ' + headerBackgroundColor + ';
border:2px solid ' + 'White' + ';
border-radius:7px;
width: 100%;
display: table;
vertical-align: middle;
}
Third, each of the child divs (in this case there are three) should be given a width that is a percentage of the parent container. And, since the parent container has been told to act like an HTML table element, these child divs should be told to act like table cells using the "display: table-cell;" attribute. They should also be set to vertically align their elements in the middle using the "vertical-align: middle;" attribute, ensuring that each image in each child div will all align along their middles.
div#div_header_left {
width: 20%;
border-radius:7px;
display: table-cell;
vertical-align: middle;
}
div#div_header_center {
width: 60%;
border-radius:7px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
div#div_header_right {
width: 20%;
border-radius:7px;
display: table-cell;
vertical-align: middle;
}
Finally, the images that will be located within each child div that acts like a table cell should be decoupled from the divs, themselves and should be given their appropriate alignments...
img.image_header_left {
float: left;
}
img.image_header_center {
text-align: center;
}
img.image_header_right {
float: right;
}
When applied, the dom's source code will look like:
<body>
<div id="div_header_container">
<div id="div_header_left">
<img class="image_header_left" src="./Logo_Left.png" alt="Header Left Image" />
</div>
<div id="div_header_center">
<img class="image_header_center" src="./Logo_Center.png" alt="Header Center Image" />
</div>
<div id="div_header_right">
<img class="image_header_right" src="./Logo_Right.png" alt="Header Right Image" />
</div>
</div>
</body>
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I'm hoping someone here can help me out with this simple task. I'm looking to place several span elements inside of a horizontal scrolling DIV. I originally had DIVs inside of the horizontal DIV but was told this:
CSS rendering is not going to work on inline block elements. They will always wrap unless the containing DIV is set to a width value large enough to let all inline block elements float left.
I switched to elements but I'm still having trouble with them wrapping. I was sent here, which led me to here, and then I found this on my own. None of these are working for me.
The page in question is here: http://melanie-patterson.com/fashion-bloggers/
As of now, this is my HTML:
<div class="SpanContainer">
<span class="block">
<img src="http://melanie-patterson.com/wp-content/uploads/2012/10/dlsw4.png" alt="" />
<br>description</span>
<span class="block">
<img src="http://melanie-patterson.com/wp-content/uploads/2012/10/leprettystellar.png">
<br>DESCRIPTION</span>
<span class="block">
<img src="http://melanie-patterson.com/wp-content/uploads/2012/10/simonett.png" alt="" />
<br>DESCRIPTION
</span>
</div>
And here is my CSS:
.format_text {
width:750px;
height: 600px;
overflow: auto;
white-space: nowrap;
}
#SpanContainer {
width:1000px;
height: 600px;
overflow-x: scroll;
overflow-y: hidden;
margin:auto;
float: left;
}
span.block {
display: inline-block;
width: 300px;
}
I don't know why I'm having so many issues with this! Any help would be wonderful. Also, let me just add that I'm using Wordpress, and specifically, the 'Thesis' theme by DIYThemes.
That should be div id="SpanContainer"
You used class instead of id
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.