This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
How do I center a div at the middle of my page in html using CSS?
Something like www.google.com, when you go to the site, you will see the search bar and the logo are centered in the middle of the page.
Any way to go around this?
MARKUP
<div class="outer"><div class="inner">your content</div></div>
STYLE
.outer {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
text-align: left;
}
DEMO
<div class = "center_me">Some content</div>
corresponding CSS to center the div would be,
.center_me {
dislay: table;
margin: 0px auto;
}
or,
.center_me {
display: table;
width: 50%;
}
center the div using margin : auto.
Html:
<div id="center"></div>
And css:
#center {
margin : auto;
display : inline-block;
}
Try this;
Html:
<div id="element">your element</div>
css
#element {
width: 200px;
display: block;
margin: 0 auto;
}
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I have this :
.themeMenu {
width: 100%;
height: 10%;
border: 0px;
overflow: hidden;
background-color: yellow;
}
.Preview {
display: inline-block;
height: 100%;
width: 15%;
background-color: red;
margin-left: 2%;
}
.mag {
display: inline-block;
height: 100%;
width: 15%;
background-color: green;
}
.themeTitle {
display: inline-block;
height: 100%;
width: 20%;
background-color: green;
text-align: left;
}
<div class="themeMenu">
<div class="preview"></div>
<div class="mag"></div>
<div class="themeTitle">text here ruin it</div>
</div>
Problem : when I don't put text into themeTitle its aligned to the right just fine, but if I put one letter inside this div, all of it will go down so preview/mag are vertically aligned but themTitle goes down.
EDIT:
`vertical-align:top;`
will put the themeTitle in the same height with preview/mag, but the text will be on top, I need all of them to be vertically aligned to center :
( preview | mag | themeTitle )
Solve it with : vertical-align:top; , but text is still on top , so added a new h1 inside :
<div class="themeTitle"> <h1 class="fontRoundedText">ff</h1> </div>
Then on this h1 ,
.themeTitle>h1
{
vertical-align: center ;
font-size: 100%;
}
try this, just insert newline
<div class="themeMenu">
<div class="preview"></div><br>
<div class="mag"></div><br>
<div class="themeTitle">text here ruin it</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
This question already has answers here:
How to vertically center a container in Bootstrap?
(10 answers)
Closed 5 years ago.
By default the row aligns to the top.
I tried to put margin-top: auto; and margin-bottom: auto; but doesn't work.
Also vertical-align: middle; also does not work.
Is there an easy fix to this?
Thanks
.container {
background-color:black;
height: 100px;
}
.row {
background-color:#fff;
height: 50px;
}
<div class="container">
<div class="row">
</div>
</div>
You can use flexbox for this:
.row {
display: flex;
align-items: center;
justify-content: center;
}
Basically, this question is a duplicate. There are various centering methods for Bootstrap explained in that question. This will work specifically for your scenario with the row inside the container. Here are 2 different methods..
// method 1 flexbox
.container-flex {
display: flex;
align-items: center;
}
// method 2 translatey
.v-center {
position: relative;
transform: translatey(-50%);
top: 50%;
}
http://www.codeply.com/go/b6wTQTzoe1
Set width and height for row and
.row {
margin: 0 auto;
}
<div class="inner">
<p>
Text
</p>
</div>
.inner {
height: 200px;
width: 300px;
background: orange;
vertical-align: middle;
display: table-cell;
}
The "Text" should be vertically aligned.
Display table-cell works with vertical-align.
I think it should be possible to do it with inline-elements too.
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
As I said in the title, I am trying to center the text on a div - vertically and horizontally, but without success. Please check my code and help me to see where the problem is.
HTML Code:
<div id="wrapper">
<div id="top">
<div class="container-fluid text-center">
<div id="top-rectangle" class="mid">
<p>
Hello, text and text.
</p>
<p>
More text
</p>
</div>
</div>
</div>
CSS Code:
body {
height: 100%;
margin: 0;
}
#wrapper {
display: table;
width: 100%;
}
#top {
height: 0;
display: table-row;
vertical-align: middle;
}
#top-rectangle {
height: 450px;
background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
background-size: cover;
color: white;
}
.midSection {
text-align: center;
vertical-align: middle;
display: table-cell;
}
JSFIDDLE:
https://jsfiddle.net/krgtdomh/
Note: Please know that I searched an answer and I saw some, but I still don't understand whats wrong with my code that the text doesn't center.
Check this: https://jsfiddle.net/krgtdomh/1/
I've added:
.outer {
display: table;
position: absolute;
height: 450px;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
And I've added display:block; to #top-rectangle and changed the height to 450px.
I used this answer to get there
It looks like your CSS code is fine, but there is a mistake:
In CSS you use: midSection
In html: class="mid"
As you can see this way the names are different and css is not used, here is a fix:
https://jsfiddle.net/krgtdomh/2/
I've also added a width to your div:
#top-rectangle {
height: 450px;
width: 450px;
background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
background-size: cover;
color: white;
}
For center the div .midSection vertically and horizontally
CSS
.midSection{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?
div {
height: 400px;
width: 800px;
background: red;
}
<div>
<h1>This is title</h1>
</div>
you can use display flex it enables a flex context for all its direct children, and with flex direction establishes the main-axis, thus defining the direction flex items are placed in the flex container
div{
height: 400px;
width: 800px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
Just do this, which works on every browser:
div{
height: 400px;
width: 800px;
background: red;
line-height: 400px;
text-align: center;
}
The line-height property specifies the line height (which centres it vertically), and the text-align:center place it directly in the centre horizontally.
<div>
<style>
div {
position: fixed;
top: 50%;
left: 50%;
}</style>
<h1>This is title</h1>
</div>
With position: fixed you set the position to a fixed value, and with top and left both set to 50% you'll get it in the middle of the screen.
Good luck coding!
Here is some more information: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
.container {
display: table;
}
.centered {
display: table-cell;
height: 400px;
width: 800px;
background: red;
text-align: center;
vertical-align: middle;
}
<div class="container">
<div class="centered">
<h1>This is title</h1>
</div>
</div>