I have 3 divs in a div and I want to center the bottom one. I've tried every hint I've found on the net (a you can see in my code...), but nothing works.
This should be fairly easy, but it just won't center.
.container {
position: relative;
width: 968px;
margin: 0 auto;
text-align: center;
}
.text {
position: absolute;
width: 968px;
height: 100px;">
}
.bg_image {
position: absolute;
width: 968px;
height: 545px;
top: 150px;
background-image: url(x.jpg);
}
.bg_image2 {
position: absolute;
display: block;
width: 50%;
margin: 0 auto;
height: 200px;
top: 545px;
background-image: url(x.png);
background-repeat: no-repeat;
}
Firstly in your css code there's an error in .text remove this "> after height: 100px;
Secondly we can't answer this if you don't add your html code.
I hope this example code may help you..
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
#outer{ position:fixed; top:0; left:0; width:100%; height:100%; }
#inner1{ width: 50%; height: 20%; top: 25%; margin: 0 auto; position: relative; background:orange; }
#inner2{ width: 50%; height: 40%; top: 25%; margin: 0 auto; position: relative; background:red; }
</style>
</head>
<body>
<div id=outer>
<div id=inner1> </div>
<div id=inner2> </div>
</div>
</body>
</html>
Give a fixed width eg(width:100px;) and margin:0 auto; whichever Div you want to make in center.
This will work for you.
.centerDiv{
width:100px; /*as per your choice but width should be fixed.*/
height:100px; /*as per your choice even you can add auto*/
margin:0 auto; /*this is important to make div in center.*/
}
Related
I've looked for a previous answer that helped me but couldn't find one.
HTML:
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
CSS:
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 35%;
left: 44.5%;
margin-top: -65px;
margin-left: -33px;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
How do I set it up so that no matter the zoom of the page, the div/image is always horizontally aligned with the text below it?
The site is: http://libeclipse.me/
<html>
<head>
<style>
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position:relative;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 200px;
display: inline-block;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
h2#hello {
position:absolute;
top:0px;
width:100%;
margin:auto;
}
</style>
</head>
<body>
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
</body>
<html>
Review this and make note of the margin:auto (Centered the h2text in absolute position) and display:inline-block(Centered the bunny image).
Removed the left % and margins that were present from h1#logo.
Enjoy.
Thanks.
On the h1#logo rule change the left to 50% and the margin-left to -100px
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
Could any one help me around this piece of stupid code where I lost almost 2hours trying to figure out how to make it work. Goal is to center input field verticaly and horizontaly inside horizontal bar.
Here is a simplified code:
HTML:
<div class="navigationBar">
<input type="text" id="searchField">
</div>
CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#searchField{
margin; auto;
height: 25px;
width: 200px;
}
I've also tried with display modes, changing position types but no luck.
Here is the code
Adding a line-height wil make it centered vertically.
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#seachfield
margin; 0, auto;
height: 25px;
line-height: 40px;
width: 200px;
}
Answer is simple, just remove padding for #nav element and set his height and line-height to 40px and then set display: inline-block for #search
#nav {
line-height: 40px;
height: 40px;
}
#search {
display: inline-block;
}
Try below CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
position:relative;
}
#searchField{
margin: auto;
height: 25px;
width: 200px;
position:absolute;
left:0px; right:0px; top:0px; bottom:0px;
}
PS : its not margin; auto;, the correct syntax is margin: auto;
DEMO
add display:block;
#searchField{
display:block;
margin: 2px auto;
height: 25px;
width: 200px;
}
margin auto: top and left
add 'text-align: center;'=> (not only alignment text)
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
text-align: center;
}
#searchField{
height: 25px;
width: 200px;
display:inline-block;
margin:4px auto;
}
2 ways to do it
second way is actually using latest css features so , take care
1.)
.navigationBar { position: relative;}
#searchField { width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.)
.navigationBar { position: relative;}
#searchField { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I' am trying to position a div on my site to bottom 0px. Please see the code below. This div with position 0px is wrap inside another div.
Here's the HTML
<div class="top-wrap">
<div class="clearfix top-cleafix">
<div class="test">
Test
</div>
</div>
</div>
Here's the CSS
.clearfix{
width: 960px;
margin-left: auto;
margin-right: auto;
}
.top-wrap{
height: 341px;
background: #F00;
width: 100%;
}
.top-cleafix{
height: 100%;
}
.test{
bottom: 0px;
}
Try:
.test{
position:absolute;
bottom: 0px;
width:100%;
}
.top-wrap{
height: 341px;
background: #F00;
width: 100%;
position:relative; //add relative position
}
Fiddle here.
add
position:absolute;
or
position:relative;
based on content
use
.test{
float: bottom;
vertical-align:bottom;
}
you need to add absolute position in test and relative in top-wrap
.top-wrap{
position:relative;
height: 341px;
background: #ddd;
width: 100%;
}
.clearfix{
width: 960px;
margin-left: auto;
margin-right: auto;
}
.top-cleafix{
height: 100%;
}
.test{
bottom: 0px;
position: absolute;
}
Fiddle example
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. Any help appreciated!
image: http://i.imgur.com/FPuSiIu.png
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
css:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin on both sides.
JSFiddle
CSS
#container{
position: relative;
}
#left, #right {
width: 200px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
#center {
margin: 0 200px;
}
i've done this on my layout and it works fine for me
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container{
display: inline-flex;
width: 100%;
height: 100%;
background: lightblue;
}
#left {
width: 240px!important;
min-width: 240px!important;
background: red;
height: 100%;
}
#right {
width: 400px!important;
min-width: 400px!important;
background: red;
height: 100%;
}
#center {
background: blue;
width: 100%;
min-width: 600px;
height: 100%;
}