I'm trying to accomplish something like this with CSS3:
Where the purple circle is the image and the less purple thing is the div background.
My first guess was negative padding but a quick search told me this isn't allowed. Normal overflow doesn't work because I want it to start above background as well as end below it. I'm pretty new to CSS so I don't really know how this might be done.
Use relative positioning, top, and possibly left.
position: relative;
top: -25px;
left: -15px;
Relative Positioning was defined in CSS 2.0. Which means no CSS3 required and it will work on almost every browser, including mobile.
You will also have to set the height and top margin for the div.
Here is my test file and output.
<html>
<head>
<style type="text/css">
.purpleRectangle{
background: #b93b8f;
height: 200px;
margin-top: 30px;
}
img{
position: relative;
top: -25px;
left: 15px;
}
</style>
</head>
<body>
<div class="purpleRectangle">
<img src="circle.png" />
</div>
</body>
</html>
Related
I tend to do this every web site I design I do, but I have yet to actually find a real good way to do it. A company usually gives me their logo, I center it in the middle of the screen for when you go to the page, and then it auto forwards you to the home page. I can not seem to find a good way to center an image in the middle of the screen without a bunch of tables and divs! Any good suggestions?!
You could try using a div in your HTML like this:
<div id='dv'></div>
And using a background image like this:
#dv {
background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
background-position: center;
}
html,body,#dv { /* so that the #dv can fill up the page */
width:100%;
height:100%;
}
Fiddle
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMtBiLioXqfhufpptex_ta8kGJa5UDQS3aITpBetR8EwH5GGDTJw" />
</body>
Related: Center a div
Personally, I like using the display: table-cell method.
For example, if my HTML is:
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company ABC" />
</div>
Then my CSS should be:
div.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
height: 200px;
}
If I'm unable to use the above method, another viable option is to use the line-height property.
HTML for line-height method:
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>
CSS for line-height method:
img {
line-height: 300px;
}
You could use JavaScript to calculate the center point and position it with either margin or top (with position:relative/absolute), but this isn't really clean.
I'm assuming you're talking about a splash page, so here is a simple example (although in other circumstances I do not recommend modifying the body tag as I have done):
<!doctype html>
<html>
<head>
<title>blah</title>
<style type="text/css">
html,body {margin:0;padding:0;width:100%;height:100%;}
body {display:table;}
p {display:table-cell;text-align:center;vertical-align:middle;}
</style>
</head>
<body>
<p>Hello World - This could have an image in it</p>
</body>
</html>
The trick is in the CSS:
The item you wish to center both horizontally and vertically is displayed as a table cell: display:table-cell
The parent (container) of the item you wish to center is displayed as a table: display:table
Make sure the table display element is consuming the entire area which you would like to center against.
The item you wish to center must be told to align horizontally (text-align:center declaration) and vertically (vertical-align:middle declaration)
The text-align and vertical-align properties only work this special way because the element is displayed as a table-cell
You don't say if the image size is known.
There are a couple of ways to do this, I favour some CSS like so on an image with id="centreme" (if the image is 200x200) and a wrapper for the entire page
div#contentwrapper {
width:100%;
height:100%;
position:relative;
}
img#centreme {
position: relative;
width: 200px; /* the image width */
height: 200px; /* the image height */
top: 50%;
left: 50%;
margin-top: -100px; /* half the image height */
margin-left:-100px; /* half the image width */
}
fiddle for you to play with http://jsfiddle.net/7PYzB/2/
Please Help me to center the message box on fit on any screen resolution..
can you show what css or style, margins, left, right,that I can use?
Center Horizontally
To center a div horizontally you can use margin: auto auto; width: 500px where the width is any width you want it to be.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: auto auto;
background-color: #CCC;
}
Center screen with fixed dimensions
If you can fix the content height and width then it's possible to center the div both horizontally and vertically using just css. This is achieved by wrapping your content in another div, then positioning your content div's top: 50% and then subtracting half the height of it's margin from it: margin-top: -100px, assuming the height was 200px. See example below:
JS Fiddle.
HTML:
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
CSS:
#wrapper {
position: relative;
background-color: #EEE;
width: 200px;
height: 200px;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
background-color: #DDD;
}
Pretend it's vertically centered
Also you can give a fixed margin-top (or top with position: absolute) to make it seem vertically centered in most desktop and laptop screens.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: 100px auto;
background-color: #CCC;
}
Use Javascript
It is not possible to vertically center content with arbitrary height using just css. In this case you will need to use Javascript to position the div.:
The basic idea is:
you calculate the height of the content at the time you need to show the content, or when the content is loaded.
Then change any of the many css properties to position the div at the vertical center.
My personal preference is you to use position: absolute with top property. You can also use margin-top but you probably don't want this div to take up space in the box model if you have other content on the page.
JS Fiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var el = $('#content');
var elWidth = el.width();
var elHeight = el.height();
el.css({
position: 'absolute',
top: (windowHeight / 2) - (elHeight / 2),
left: (windowWidth / 2) - (elWidth / 2),
});
});
</script>
<style>
#content {
width: 200px;
height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
Some content
</div>
</body>
</html>
Use any of the many Javascript "plugins" available
There is a multitude of CSS frameworks around the web that provide boilerplate CSS that we use on most websites. And some of these also help with these kind of common presentation issues with small Javascript plugins. Personally I know that Twitter Bootstrap provides a Modal plugin which you can use for this purpose. There is also many jQuery plugins for the sole purpose of centering content in a page.
Conclusion
Although there is a multitude of options to achieve this, I it sad to see that CSS still does not support doing this. Maybe it's a hard thing to do across different scenarios, I don't know. From the options that I mention above, I think the Javascript option is the most versatile, and with todays browser speeds, and the likeliness that nobody would have Javascript disabled on their browser, this would be the best way to go.
I just saw this after reading about how to do one on a CSS Techniques page.
Basically, define a little CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
ADVANTAGES:
Cross-browser (including IE8-10)
No special markup, minimal styles
Responsive with percentages and min-/max-
Use one class to center any content
I have not had time to test it out, but I wanted to post it up here in the hope that it helps others.
Here is what you are searching for http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
You can easily make it with jquery! Or with an css solution given on this site!
You should give us your code that you have tried. Assume that you have HTML code like below:
<div id="message">
Hello World!
</div>
CSS code:
#message {
width: 100px;
height: 100px;
margin: 50px auto;
}
Then your message box will be 100x100 and 50px from the top of the screen and automatically aligns to the center of the screen.
So I am making a little site just for fun - and to learn HTML a little better.
I have four divs. I want the to be arranged kind of like a collage. I have three of them in the perfect positions, but the fourth one does not show up at all unless I make the other three invisible with display:none in the CSS...
Anyone know why this would happen? Im using Chromium on Ubuntu.
<body>
<center>
<div id="content1">
</div>
<div id="content2">
</div>
<div id="content3">
</div>
<div id="cont4">
THIS ONE DOESN'T SHOW UP.
</div>
</center>
</body>
Here is the CSS:
#content1{
width:230px;
height: 160px;
background-color:blue;
border-radius:10px;
position: relative;
left: -240px;
}
#content2{
width:230px;
height: 350px;
background-color:red;
margin-top: 10px;
border-radius:10px;
position: relative;
left: -240px;
}
#content3{
width:230px;
height: 520px;
background-color:red;
border-radius:10px;
position: relative;
top: -520px;
}
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
}
From what I saw in Chrome and Firefox, cont4 is showing up, but it's way down on the page (you have to scroll to see it). I don't know exactly where you want it, but adding top: -1040px aligns it at the top of the page with the rest of the divs.
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
top: -1040px;
}
Give #cont4 a top: -1040px;. This means, for the previous div, you applied a -520px top to make it align top. So this lengh + height of that div (520+520=1040) is required for your purple div to appear. Here is the demo.
But this is not my solution. Use margin-top: -520px; instead of top: -520px; to your third div. This will shift the fourth div along with the third div. But top wont do this. top is for tweak an element with use of position property. margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.
Here is the corrected demo
The tag center is deprecated as Jared Farrish said. Actually, you should use CSS more carefully to get this types of layouts. There are lots of example is available. Trying to search with "Multi Column Layout with CSS". You can check THIS tutorial.
Also, THIS is very useful resource. THIS tool is interesting one. You can check this as well.
My web form is pretty simple. It has to have three lines of text/ASP.NET elements. The Master page has a header and a footer. I need to center those three lines in the middle of the page vertically and horizontally, especially if the bottom changes. How do I do this with CSS?
In your master page you will want a container and center that, then you will want a div for the main content. the raw code would be something like:
<div id="center">
<div id="main">
<p>This text is perfectly vertically and horizontally centered.</p>
</div><!-- end #main -->
</div><!-- end #center -->
<style>
#center { position: absolute; top: 50%; width: 100%; height: 1px; overflow: visible }
#main { position: absolute; left: 50%; width: 720px; margin-left: -360px; height: 540px; top: -270px }
</style>
This is using the same approach as offered by Damien. It tends to be the only way to accomplish with CSS alone. You can probably better solve this with the use of JavaScript/jQuery.
Horizontally aligning things is simple. If the element has a fixed with give it the following css:
.element
{
margin: 0 auto;
}
This tells the element to have 0 top and bottom marin and auto-calculate the margin to the left and right.
There is a way to vertically center elements called dead center. It uses a 50% off-set from the top of the page and a negative margin to bring the content to the center (vertically). Drawback is that your element needs have a fixed size (height and width).
This is what worked for me:
<style type="text/css">
.auto-style1 {text-align:center;}
</style>
i am trying to vertically align a div inside another div at the bottom and i do not want to use relative/absolute positioning. below is my markup. it seems to work. but i am not sure whether this is the best solution. can anyone recommend a better way? also, in FF if i remove the border around the container, it stops working. does anyone know why?
thanks
konstantin
<html>
<head>
<style type="text/css">
.container
{
background-color: #ffff00;
height: 100px;
line-height: 100px;
border: solid 1px #666666;
}
.container .content
{
margin-top: 60px;
background-color: #ffbbbb;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">test</div>
</div>
</body>
</html>
Do use absolute positioning. I think it is probable that the reason you do not want to use absolute positioning is based on a misconception. Namely, if the container has the position attribute as well, absolute positioning will not be in regard to the whole page, but in regard to the container, and then you will get what you want with:
.container
{
position: relative;
}
.container .content
{
position: absolute;
bottom: 0px;
}
Now, no matter the sizes, your content will be will be at the bottom of the container.
That will work... only thing is you won't be able to put anything in the empty top 60 pixels.
I believe that if you're looking for the best solution, you should indeed use relative/absolute positioning.
Is there any specific reason that you're trying to avoid relative/absolute positioning?