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.
Related
So I want to be able to centre all my content inside a particular div. The div in question has a 'height: 100vh; attribute to enable it to fit the height of the viewers window.. you can view it at http://digitalsix.hostzi.com/
What i'm looking at being able to do is center the content at all times, including when the window has been resized (i realise once it gets too small theres not much that can be done. An example of what im looking for is http://www.pixelbeach.co.uk/
I just cant seem to find the way to do it. If anyone could help that would be great.
Markup:
#screenfiller{
height: 100vh;
background-image: url(topbar_1.jpg);
background-position: center;
}
<div id="screenfiller">
<header>
<img alt="Digital Six Creative" src="logo.svg">
</header>
<p>TEST BUTTON</p>
</div>
</div>
<a name="about"></a>
</div>
You could wrap the content in a container div, and do:
.container{
position:absolute;
top:50%;
transform:translateY(-50%);
}
Or:
#screenfiller{
...
display:table;
width:100%;
}
.container{
display:table-cell;
vertical-align:middle;
}
To take the header into account, change your #screenfiller height property to height: calc(100vh - 340px); where 340px is the height of your header.
I'm sure this is super simple, but I'm new to css. I'm essentially trying to position some rendered typography and make it stay centred no matter what the size of the browser is. I've tried using margins with percents, but that doesn't seem to work.
Here's my code.
html
<div class="weare">
<img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
<img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
<img src="image/textrenders/awebbasedstudio.png" />
</div>
css
.weare {}
.shaftesburytv {}
.awebbasedstudio {}
I want the result to look something like this
Any help would be appreciated.
Simplify your content:
<div id="container">
<img src="http://placekitten.com/200/50">
<img src="http://placekitten.com/300/100">
<img src="http://placekitten.com/250/75">
</div>
Then ensure the container has the same width as the largest contained image, and apply margin:0 auto; to it to center. Finally put display:block on the images to make them all stack vertically:
#container {
margin:100px auto;
width:300px;
}
#container img {
display:block;
}
Sample here.
Alternatively, if you also want to center vertically, you can also use absolute positioning and then negative margins on the absolute size of the object - no problem for you since the image sizes are fixed:
#container {
margin-left:-150px;
margin-top:-112px;
left:50%;
position:absolute;
top:50%;
}
#container img {
display:block;
}
Sample of this approach here.
Since you're using images, you could
margin: 0 auto;
to them. For text, you could
text-align:center;
With divs, you could also center align them (in HTML).
You could also use center tags: http://jsfiddle.net/A33J2/
It can be verry simple.
If you do not split your image and gather all text of it into one.
html
<img id="my-whole-image" src="http://placekitten.com/300/250" />
css
#my-whole-image {
margin-left:-150px;
margin-top:-125px;
left:50%;
position:absolute;
top:50%;
display:block;
}
jsFiddled here
Just a tip, ence you're saying you are new to css, i presume you are new to html too : always use the minimum required to build your webpages. Those 3 images had to be merged into one for many reasons like server request, bandwidth, browser redraw, dom elements number.
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.
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>
Im just getting in to web dev (mainly an iOS, Java, c# programmer). I have a simple problem bt it is anoying.
<div id="banner">
<img src="Styles/Banner.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
I have a banner which is a simple image (.jpg) and I want to overlay some text. The problem is positioning the text over the banner. I dont realy want to use apsolute positioning. I would like to have both the image and the text centered. The problem is I ony seem to be able to overlap the text over the image when using apsolute positioning, which will be effected if the window is resised. Whats the best/simplist way to do this.
Just Like to thank all of you for being so helpful. GC
Live demo
Hey now i think you should want to this
HTML
<div id="banner">
<img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
Css
#banner{
position:relative;
background:green;
padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
top:20px;
left:10px;
background:red;
}
Demo
You have to give the parent element (#banner) a position: relative; to make the absolute position of its child (#bannerText) dependent on the banner position and not on the window border.
If you can use image as background instead of <img> tag using css like following example
#bannerText
{
background: url("Styles/Banner.jpg") no-repeat center center;
width: 123px;
height: 123px;
text-align: center;
}
If you don't want to use Position:
if you want to use <img> then go with "feeela's" ans