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.
Related
Is it possible to have the content of a div vertically centred?
<div style="padding-left: 15px; vertical-align: middle; align-content: center" >
<h3>Selections</h3>
</div>
I want the text left aligned and in the vertical middle
I gave you an example of vertical alignment using flex rules. In this case, the vertical alignment occurs with the help of an align-item: center. Also, you need space for vertical alignment.
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div>
<h3>Selections</h3>
</div>
Well it's an easy property you can set. You can set the text-align property. You can read more about this below.
https://www.w3schools.com/cssref/pr_text_text-align.ASP
for vertical centering:
https://www.w3schools.com/css/css_align.asp
You want to use the CSS property text-align. Also remove the inline 'style' you have on your div and use a css file
.center-content {
text-align: center;
width: 100%;
}
<div class="center-content">
hello world
</div>
If you are oke with setting the height of the h3 tag, you can do this:
h3{
height: 4%;
margin-top: 48%;
margin-bottom: 48%;
}
Otherwise do this;
h3{
margin-top: 50%;
margin-bottom: 50%;
}
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
I've been trying to center a div and I can't figure out why it isn't working. I tried other solutions I've seen (here and elsewhere), but none worked.
<div id=story-container>
<div id="story">
<span id="introstory">story text</span>
<button type="button" id="storynext">Click to continue..</button>
</div>
</div>
What CSS code can I use to center this div on any resolution the user happens to be on? Thanks in advance!
There are several ways of centering divs within another div.
Flex
.parent {
display: flex;
align-items: center;
height: 500px;
}
.child {
width: 100px;
height: 100px;
background-color: #333;
}
<div class="parent">
<div class="child"></div>
</div>
Read more on flex here.
Position
.parent {
position: relative;
height: 500px;
top: 0;
}
.child {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 50%;
margin-top: -50px;
}
<div class="parent">
<div class="child"></div>
</div>
As you can see, this way isn't very flexible, so I recommend the first option.
Hope this helps.
UPD: I misunderstood the question, sorry. Updated for vertical.
Your first line needs quotation marks around the div id. For example it should be:
<div id="story-container">
I would recommend making this a flex container and aligning with the following
#story-container {
display: flex;
align-items: center;
justify-content: center;
}
Please see a working example in my codepen here:
https://codepen.io/CTBroon/pen/PoYzyLb
Your id of your story-container is not syntaxed correctly, it's missing quotation marks.
Use this: <div id="story-container">
Instead of: <div id=story-container>
Vertically
#story-container {
display : flex;
align-items: center;
}
If you want center from all sides use:
#story-container {
display : flex;
align-items: center;
justify-content: center;
}
I'm assuming you want to center the inner div horizontally, not vertically - you don't actually say which.
A simple way to center a div horizontally inside another is to give the inner div a width in % or px, (because divs, as block level elements, normally expand to be as wide as possible), and then apply this css to the inner div:
margin:0 auto;
The 0 is applied to the top and bottom margins, the auto to the horizontal margins. This will center the div horizontally.
#story-container {
border:1px solid red;
}
#story {
border:1px solid green;
width:200px;
margin:0 auto;
}
Post again with more detail if this isn't what you need.
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 4 years ago.
Scenario :
I have a list of inline-block elements that I'm able to center.
But when the number of elements don't fit on a line, Todo : I would like
them to be justified to the left.
I've been messing with flex boxes
and other things, but I seem to only be able to do one at a time
(center the entire element or justify the elements left).
Anyone know
how to accomplish this?
Below is the jsfiddle I've been messing around with, as well as some images that are hopefully helpful.
What I have:
What I want:
https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/
Code:
jsx:
<div>
<button onClick={this.handleClick}>Increase!</button>
<div id="items-box">
{ items.map((item, idx) => (
<div className="item-box" key={idx}>{item}</div>
))}
</div>
</div>
CSS:
#items-box {
margin: 50px;
text-align: center;
}
.item-box {
display: inline-block;
height: 100px;
width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Try to use flexbox:
https://jsfiddle.net/hapu8ny2/
html,
body {
min-height: 100%;
}
#items-box {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.item-box {
display: flex;
min-height: 100px;
min-width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Note: see i use min-height and min-width instead
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>
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;
}