I've decided to throw in the towel on this problem and need some help :). As per title trying to vertically align an image wrapped in an anchor element in the center of a floated fixed height div.
Done a lot of googling for solutions and the closet I can get is below when the div is not floated (however it needs to be). Any ideas would be greatfully appreciated!
.class_name {
/*float: left*/
width:153px;
height:153px;
margin:3px;
padding:4px;
border:1px solid #dedede;
text-align: center;
vertical-align: middle;
background-color: #000;
display: table-cell;
}
<div class="class_name">
<img src="image.jpg" alt="" />
</div>
Well, I bumped into the same issue last night (for a gallery-like type of thing), and managed to find a solution after stumbling onto this page. I'm happy to report this also seems to work for floated elements!
The trick is basically to give the outer element "display: table;", and the inner element (containing the img) "display: table-cell;".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<style type="text/css">
.class_name {
display: table;
float: left;
overflow: hidden;
width: 153px;
height: 153px;
}
.class_name a {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="class_name">
<img src="image.jpg" alt="" />
</div>
</body>
</html>
For IE8, you do need to be in standards mode. Some additional positioning is needed to get it to work in IE7:
<!--[if lte IE 7]><style type="text/css">
.class_name {
position: relative;
}
.class_name a {
position: absolute;
top: 50%;
}
.class_name img {
position: relative;
top: -50%;
width: 100%;
}
</style><![endif]-->
If the height is fixed and you know the size of the image, just position the image manually. Use position:absolute;top:25px; on the image or something like that, or add a margin to the image: margin:25px 0;.
There is a cross browser css solution for this available here: http://www.vdotmedia.com/blog/vertically-center-content-with-css/
Related
So, the issue is rather obvious. Now I've two elements in div containers, that should abut one another, but because of lack of css skills I need your help. So, the code is rather primitive.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Новый формат общения</title>
<html>
<link rel="stylesheet" type="text/css" href="center_ribbon.css">
<link rel="stylesheet" type="text/css" href="center.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.center {
top: 50%;
left: 50%;
width: 310px;
height: 50px;
position: absolute;
margin-top: -155px;
margin-left: -25px;
}
</style>
<body>
<div class="center"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>foo</h1></strong><div class="ribbon-stitches-bottom"></div></div></div>
<div class="wrap"><div class = "lifted">
<p>footext</p></div></div>
</body>
</html>
So, the corresponding code of css as follows
center_ribbon.css
html, body {height:100%;}
.wrap_ribbon {
position:relative;
width:50%;
margin: 0px auto ;
height:auto !important;
height:100%;
min-height:100%;
}
.contentdiv_ribbon {
display:block;
position:fixed;
margin-top: 200px;
margin-left: 170px;
}
center.css
html, body {height:100%;}
.wrap {
.center {
top: 50%;
left: 50%;
width: 260px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -130px;
}
}
As you can rightly notice, here is mess of code, sorry for that. I'm new to css and other web stuff and just poking around. Any improvements would be appreciated.
UPD. Added my page http://jsfiddle.net/7xZLM/5/
Try this:
<head>
<style>
.main {
margin: 0 auto;
}
.column {
float: left;
width: 40%;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="column">DIV 1</div>
<div class="column">DIV 2</div>
</div>
</body>
Click JSFiddle
It's hard to know what you're asking. It sounds like you want 2 divs that sit next to each other. If so, you're wanting to look at float in CSS.
simplified example
CSS
.col1 {
float: left;
}
HTML
<div class='bold col1'> foo</div>
<div class='col2'>footext</div>
An absolutely positioned element is positioned relative to the first parent having position other than static, if none is there it'll be positioned relative to the initial container, <html>
In your code .wrap doesn't have a positioned parent so it'll be positioned relative to the document, top:50%` will position the div 50% below the top of document...
Update
Since .wrap is positioned relative to the document, it's position changes with the height of the page, while the ribbon will stay at the top of the page, causing space between them.
Wrapping them inside a positioned parent will fix the issue.
check this JSFiddle
And from what i understood, you need the .wrap to look like it's coming out from the ribbon, for that you can apply an z-index less than the ribbon to .wrap,
as in this Updated JSFiddle
I have a dynamically created header on a page. Sometimes, there are left and right buttons to the sides of it, sometimes only left or right, and sometimes none.
Is there a way to center the main text and keep it centered when adding other elements next to it? Currently, when I add the left/right buttons, the whole assembly is centered. If I only add one button, the whole thing is shifted off to one side.
How do I keep the main element centered but add other elements around it?
This works fine:
<h1>
<img src="left.png" />
Main Title
<img src="right.png" />
</h1>
This doesn't work:
<h1>
<img src="left.png" />
Main Title
</h1>
I discovered an answer to my question incase anyone in the future finds this post.
Keep the element in the markup (HTML), but style it using CSS to visibility: hidden instead of display: none. This keeps the formatting on the page, but doesn't render the object to view.
visibility: hidden NOT display: none
Read this article for more information...
This could be a solution:
<!doctype html>
<html>
<head>
<title>Select Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
}
h1 {
text-align: center;
width: auto;
line-height: 53px;
}
.left {
position: fixed;
top: 5px;
left: 5px;
}
.right {
position: fixed;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="header">
<img class="left" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
<h1>My Title</h1>
<img class="right" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
</div>
</body>
</html>
But you can find many more. Try to remove right or left img and title should remain centered.
P.S.
If you don't want a fixed header, change #header to
#header {
width: 100%;
margin-top: 0px;
margin-left: 0px;
}
If you take the code below and create an html page of it, you will see that the blue header div gets left aligned. This is despite the fact that the header element has a fixed width and left/right margins are set to auto.
The only way I can get the table centered properly is to remove the display:table-cell property.
I need it to be both center aligned (horizontally) and also need the child elements to be centered vertically (via the vertical-align and display directives).
How can I make the div be center aligned and also vertical aligned?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<style type="text/css">
body {margin:0; padding:0; text-align:center;}
.wrapper {padding-top:59px; text-align:left;}
.header {height:138px;width:917px; background:blue;margin:0 auto; text-align:center; vertical-align: middle; display:table-cell; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="siteTitle">Site Title Here</div>
<div class="tagline">Tagline goes here</div>
</div>
</div>
</body>
I changed your styles to use one of many techniques for vertical and horizontal centering. I prefer this one because it makes the most sense to me. No funky hacks involved and works across multiple browsers.
.wrapper
{
position: absolute;
top: 50%;
margin-top: -69px; /* half main elements height*/
left: 0;
width: 100%;
}
.header
{
width: 917px;
height: 138px;
margin: 0 auto;
background-color: #cccccc;
overflow: auto; /* allow content to scroll inside element */
text-align: center;
}
Drop the display:table-cell;
Just add padding to the top as needed and subtract that value from the height. Something like the following:
.header {
height:88px;
padding:50px 0 0 0;
width:917px;
background:blue;
margin:0 auto;
text-align:center;
}
You'll have to adjust the padding/height ratio to your taste.
I would like the parent-div (red) to grow with the green child-div.
Now it just stops at the viewport.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
* {
font-family: verdana;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>
I don't want to use display:table; since it does not work well in IE.
Any ideas?
Use display: inline-block; on the parent <div> and it will work as expected
Make the parent div float:left; and it will be expanded as desired.
I know I'm late, but here's what I do to fix the problem:
Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.
Here's the modified code:
.clear{
clear: both;
/* make sure there is no height set to it */
line-height: 0;
height: 0;
font-size: 0em;
}
<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
<div class="clear">/div>
</div>
Works in FF3 and IE7, but not tested in other browsers though.
Hope to, at least, help you with your problem.
Use display:table; on the parent div. Or you can put the parent div into a cell of a table.
There's too much complicated advice here. Here's a tip: instead of tinkering with table-cells, and clear and floats, just make sure the child has a border that's equivalent to the padding you were looking for the parent. Borders are always drawn outside, so it'll do what you want.
This should work...
<div style="margin: 30px; background: red;">
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>
...in all browsers, without a problem. HTH.
See this solution from quirksmode.org. It's pretty simple, just apply this class to the container/parent div:
div.container {
overflow: hidden;
width: 100%;
}
I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Then using
<div id="container>
<!-- Centered Content Goes here-->
</div>
But it just wont go to the center. It stays at the left side of the page.
An example of the CSS for the element that I want to be centered is this:
#topHeader
{
background:url(images/top_header.jpg);
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
So, my HTML would look like this:
<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>
But as I mentioned before, the element stays put.
Thanks!
Eric
Try with this
dead centre
The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.
Start off by removing the absolute positioning from the #topHeader element.
Try adding this to the top of your css file:
// Wipes out any preexisting padding and margin.
html, body {
padding: 0;
margin: 0;
}
Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.
You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.
absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property
Absolute:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
Relative:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:relative;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.
Hope this helps for you.
As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.
Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.