Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've combined some answers regarding centering an image, so it will work on a full HTML page.
.image-center {
vertical-align: middle;
margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.vert-center {
min-height: 10em;
vertical-align: middle;
height: 100%;
}
.horz-center {
text-align: center;
}
html, body {
height: 100%;
}
<body>
<div class="vert-center horz-center">
<span class="helper"></span>
<img src="img/image.gif" class="image-center" />
</div>
</body>
this way, the image will be vertically centered because its container is on 100% height of the page. this is usually way the image itself isn't centered vertically.
hope that helps some of you.
Or, you avoid so many 'bad' css styling conventions and go for something like below, as stated in the thousands of other SO questions on this matter.
option 1
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
text-align: left;
}
<div class="container">
<div class="content">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
</div>
option 2
.parent {
display: table;
height: 300px;
background: yellow;
width:300px;
}
.child {
display: table-cell;
vertical-align: middle;
text-align:center;
}
<div class="parent">
<div class="child">
<div class="content">XXX</div>
</div>
</div>
option 3
#outer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
}
#inner {
width: 50%;
height: 50%;
top: 25%;
margin: 0 auto;
position: relative;
background: orange;
}
<div id=outer>
<img id=inner src="http://placekitten.com/g/200/300" alt=""/>
</div>
option 4
If you know the size of the image (and div), you could apply margins like:
.container {
height: 300px;
width: 300px;
background: #eee;
position: absolute;
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;
}
.box {
height: 100px;
width: 100px;
background: #222;
position: absolute;
/*Centering Method 2*/
margin: -50px 0 0 -50px;
left: 50%;
top: 50%;
}
<div class="container">
<div class="box"></div>
</div>
option 5
centering text is also a doddle in css
.container {
height: 200px; /*Set line-height to this value*/
width: 400px;
background: #eee;
margin: 150px auto;
}
h1 {
font: 40px/200px Helvetica, sans-serif;
text-align: center;
}
<div class="container">
<h1>I'm centered!</h1>
</div>
option 6 (IMO the best)
using background image positioning
.container {
height: 300px;
width: 300px;
margin: 150px auto;
background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}
<div class="container"></div>
So, as you can see, there's literally LOADS of ways to achieve this with just a few lines of code.
Related
I have made an analogue clock like so that shares 1 parent div space with 2 other divs:
.left {
vertical-align: top;
width: 27%;
overflow: hidden;
display: inline-block;
}
#picLeft {
height: 100%;
width: 100%;
}
.container {
vertical-align: top;
position: relative;
display: inline-block;
width: 16.7%;
}
.clock {
vertical-align: top;
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.hands {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hands-cl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
vertical-align: top;
}
.right {
vertical-align: top;
width: 52.2%;
height: 100%;
overflow: hidden;
display: inline-block;
}
.picRight {
width: 100%;
height: 100%;
}
<div class="header-logo">
<div class="left">
<img id="picLeft" src="TIDleft.png">
</div>
<div class="container">
<div class="clock">
<img class="hands" src="TidClockFace.png">
<img id="hourHand" class="hands-cl" src="hourHand.png">
<img id="minuteHand" class="hands-cl" src="hourHand.png">
</div>
</div>
<div class="right">
<img class="picRight" src="TIDright.png">
</div>
</div>
This is what happens:
As You can see it looks ridiculous.
I don't know if the problem is in the rotation or the image size since the divs shrink the images to fit the part of the website.
This is the third day I have been persistently searching for the answer. No stackoverflow threads are similar, and I have run out of ideas for search terms.
I hope this question is asked properly, and enough info has been given.
If not though, don't hesitate to ask for something or correct me.
I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?
HTML:
<footer>
<div id="footercontent">
<div id="logobox">
<img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION
</div>
<div id="social">
</div>
</div>
</footer>
CSS:
footer {
width: 100%;
height: 200px;
background-color: white;
position: relative;
margin-top: 70px;
}
#footercontent {
width: 70%;
height: 100%;
background-color: black;
margin: auto;
}
#logobox {
width: 30%;
height: 100%;
margin-right: 0;
float: left;
}
img {
height: 70%;
position: absolute;
margin: auto;
display: block;
}
#social {
width: 70%;
height: 100%;
background-color: white;
float: left;
}
Remove position: absolute and apply margin: 0 auto to img. When position: absolute is applied on some element, it is taken out from the normal flow of DOM
img {
height: 70%;
margin: 0 auto;
display: block;
}
I need your help,
How would I go about amending the HTML or CSS markup below to have the text that is in my custom dialog box, to be vertically centered in the white space. Here is a snapshot of the problem:
and the expected result:
Here is the CSS:
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#Text {
width: 100%;
height: 100%;
text-align: center;
}
Here is the HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="Text">This is some sample text that will appear here</div>
</div>
</div>
Fiddle is: https://jsfiddle.net/vc5xL1vy/
You are going to need to set the container to display: table; and set all its children to display: table-cell but the table header to display: table-caption. I have made a few other modification to your header to a single div wrapper. JSFiddle: https://jsfiddle.net/1s45cdvs/1/
CSS
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
display:table;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
display: table-caption;
}
#Text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
HTML
<div id="wrapper">
<div id="container">
<div class="topbar">
<div style="float:left;" >Custom Dialog Box</div><div style="text-align: right;">Close</div>
</div>
<div id="Text">This is some sample text that will appear here</div>
</div>
</div>
There's multiple ways to do this but they all require you to set a pixel value for something. Padding, line-height, etc...
You can set the container display as table-cell to act like a table element would, then set width and height of the text container so that the element knows where the middle is. Using % never works for vertical aligning. Pain in the CSS.
#Text {
width: 500px;
height: 75px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
https://jsfiddle.net/bgbfpbta/
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
In the following scenario I do not understand why the height of the elements wrapper and content are not set correctly even though they are set to height: auto, meaning that the 2 divs with the class wrap are not displayed inside the wrapper and content divs.
I recreated the problem in this JSfiddle:
http://jsfiddle.net/202oy3k8/
The As you can see the two orange divs are not displayed inside the wrapper divs, even though the wrapper height is set to auto. What is causing this problem and how can I fix it?
HTML CODE:
<div id="wrapper">
<div id="content">
<div id="top">
</div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap">
</div>
<div class="wrap">
</div>
</div>
</div
CSS CODE:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 1224px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float:left;
width: 48%;
height: 400px;
}
You have to add a clear property to clear left float you have applied to .wrap divs.
What are float and clear for?
If you look in a typical magazine you’ll see images illustrating the
articles, with the text flowing around them. The float property in CSS
was created to allow this style of layout on web pages. Floating an
image—or any other element for that matter—pushes it to one side and
lets the text flow on the other side. Clearing a floated element means
pushing it down, if necessary, to prevent it from appearing next to
the float. Although floating was intended for use with any elements,
designers most commmonly use it to achieve multi-column layouts
without having to abuse table markup.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 400px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float: left;
width: 48%;
height: 400px;
}
.clear {
clear: left;
}
<div id="wrapper">
<div id="content">
<div id="top"></div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
</div>
</div
Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>