Images will not center with vertical align for me, as it seems they should. I am coding for IE7 in quirks mode only (unfortunately). My code is below. Anyone know why this wouldn't vertically align
<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
<img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>
If you want to vertically align your image within the div you should do the following:
div {
position:relative;
height:500px;
width:500px;
}
div img {
position:absolute;
top:50%;
margin-top:-XXXpx; /* where XXX is half the height of the image */
}
You can make the image a background image instead and then center the background with something like the following:
<div style="height:500px; width 500px; line-height:500px; background: green url('/images/load.gif') left center no-repeat ; "></div>
Related
I wanted to do flowing content over fixed background. It works perfectly on desktop. On iOS also works but not perfect. Main problem is on android phones. It isn't covering content. If you want edit it, here is CodePen link.
body{
height:200vh;
}
#one{
height:300px;
width:100%;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
#two{
padding-top:30px;
background-color:grey;
height:400px;
padding-left:10px;
}
.column{
width:calc((100% / 3) - 10px);
height:200px;
float:left;
margin-right:10px;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
<body>
<section id="one"></section>
<section id="two">
<div class="column column_one"></div>
<div class="column column_two"></div>
<div class="column column_three"></div>
</section>
</body>
You can place your fixed background image into a separate dedicated div, as opposed to the browser background itself.
Set your div to 100% of viewport height and width, give it a fixed position and a z-index of -10, then place all your background image styling in that div instead, leaving the browser background blank.
Dont know other workarounds. android is buggy...
On my site a have a div, inside the div I have different images width different width's and height's. I want the image to be in the center no matter what size or shape. Lets say the div is 200px * 200px. All images need to have min-width:100%; and min-height:100%; so that there is no white in the background. So basically I want the center of the image to be in the center of the div. How do I do it?...
<!DOCTYPE html>
<html>
<head>
<style>
.div{
width:200px;
height:200px;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.img{
/*What shall I put here?*/
min-width:100%;
min-height:100%;
}
</style>
</head>
<body>
<div class="div">
<img class="img" src="img.jpg">
</div>
</body>
</html>
You would be best setting the image as a background of the div and using setting the background position.
This is a duplicate question. The answer, as referenced here, is to display the image as a CSS background-image rather than using an img element and set it to display in the center:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
}
To ensure that your image is as least as large as its “containing” element you can use the background-size property, which accepts a number of different properties. The one you want is cover, which instructs the rendering engine to stretch the image so both dimensions of the image are at least equal to that of the element:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
background-size: cover;
}
Okay I have tried to center this responsive image using the vertical-align and text-align property with no luck. Can someone tell me what I'm doing wrong. I want the image to be vertically and horizontally in the middle of the page.
<div class="circle">
<div class="bl-circle" style="z-index:9999;">
<a href="http://www.leedsrush.com"><img src="images/Circular.png" onmouseover="this.src='images/leeds.png'" onmouseout="this.src='images/Circular.png'" style="width:100%; height:100%;"/>
</a>
</div>
</div>
.bl-circle{
position: absolute;
max-width:250px;
max-height:250px;
height:100%;
width:100%;
margin-left:auto;
margin-right:auto;
}
.circle{
}
I would check out this tutorial:
http://pmob.co.uk/pob/hoz-vert-center.htm
This is what I use when I am trying to center an element in my page. Works like a charm every time, especially the example at the bottom when're you don't know the width and height of the element.
This should be really easy, but think dealing with brain fog.
Trying to create a page which shows text at center of the page[ vertically / horizontally]
<html>
<head>
<title>Application error</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table>
<tr>
<th style="background-color:#FFFFFF;vertical-align: central">
This should be center of page vertcally/horizontally
</th>
</tr>
</table>
</body>
</html>
The text is aligned in center but right at top of the page - horizonatlly center but vertically.
[tried looking for tag called 'brain freeze' but could not. maybe the admins can make one for such a case]
Use this settings:
table{
position:relative;
margin:0 auto;
top:50%; /* assign manually */
}
body{
height:100%;
width:100%;
position:absolute;
}
jsFiddle:here
Change it to vertical-align: middle;
this JSFiddle shows how to align centerally
Make your CSS as
table {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
table th
{
text-align: center;
vertical-align: middle;
}
You shouldn't use tables for designing layout. Use divs instead
<div style="width:100%;height:100%;text-align:center;margin-top:50%;">
<div style="height:20px;line-height:20px;font-size:12px;margin-top:-10px;">This should be center of page vertcally/horizontally</div>
</div>
Notice the margin-top:-10px. That is because the inner div is positioned at 50% of the outer-div. But if you really want it in the middle, you want it to positioned at 50% - "half the height of the inner div" and the height of the inner-div is 20px. The line-height makes sure that text inside the inner-div is aligned in the middle of the div.
Of course you should classes (or id's) instead:
css:
.outer {
width:100%;
height:100%;
text-align:center; //Make sure everything inside the this div is centered
margin-top:50%; //Position the inner-div at half of the height of this div
}
.inner {
height:20px; //Set a specific height
line-height:20px; //Set a line-height (works when only one row of text) to align text vertically in the middle
font-size:12px;
margin-top:-10px; //Position the div upwards (half the height of this div)
}
html:
<div class="outer">
<div style="inner">This should be center of page vertcally/horizontally</div>
</div>
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div