This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 4 years ago.
Im Trying to vertically align (center) the the following card deck:
<div class="container-fluid">
<div class="card-deck d-flex justify-content-center">
<div class="col-xl-2">
<div class="card d-flex>
....
</div>
</div>
</div>
</div>
Currently looks like this:
I tried with my-auto, align-items-center, justify-content-center... but it doesn't work, what is missing?
Thanks for the help!
you can vertical align any element using position: absolute;
like ,
HTML
<div class="parent">
<div class="element">I'm always<br/>In<br>Center</div>
</div>
CSS
.parent {
height: 100%;
}
.element {
position:absolute;
top:50%;
left: 0;
transform: translateY(-50%);
}
.parent {
height: 100%;
}
.element {
position:absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
<div class="parent">
<div class="element">I'm always<br/>In<br>Center</div>
</div>
OR
using display: table-cell;
HTML
<div class="container">
<div class="content">I'm always<br/>In<br>Center</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
background-color: #dddddd;
display: inline-block;
text-align: center;
padding: 5px;
width:200px;
}
LIVE SNIPPET
html, body {
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
background-color: #dddddd;
display: inline-block;
text-align: center;
padding: 5px;
width:200px;
}
<div class="container">
<div class="content">I'm always<br/>In<br>Center</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How to center a "position: absolute" element
(31 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
This is my first post. Just as the title says, I am not able to center content inside of a div. Here is my code:
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.fineprint {
font-size: 11px;
position: absolute;
bottom: 25px;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
.couponcontent {
position: absolute;
top: 40%;
bottom: 60%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.scissors {
font-size: 48px;
color: #ed1a24;
position: absolute;
top: 25px;
display: table-cell;
vertical-align: top;
text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
<div class="feature boxed feature-s6">
<div class="fbox-content center coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<div class="couponcontent">
<h2>middle center</h2>
<p>middle center</p>
</div>
<p class="fineprint">bottom center</p>
</div>
</div>
</div>
<!-- End Coupon box -->
Can someone help me center this content inside of the div? It is currently aligned left. Thanks!
You need remove position: absolute and change display from table-cell to block.
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.fineprint {
font-size: 11px;
bottom: 25px;
display: block;
vertical-align: bottom;
text-align: center;
}
.couponcontent {
display: block;
vertical-align: middle;
text-align: center;
}
.scissors {
font-size: 48px;
color: #ed1a24;
top: 25px;
display: block;
vertical-align: top;
text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
<div class="feature boxed feature-s6">
<div class="fbox-content center coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<div class="couponcontent">
<h2>middle center</h2>
<p>middle center</p>
</div>
<p class="fineprint">bottom center</p>
</div>
</div>
</div>
<!-- End Coupon box -->
try to simplify your CSS as much as possible otherwise, there will be clashes and things like text-align:center won't work. https://www.w3schools.com/ is a great source when it comes to CSS.
.main{text-align:center}
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.couponcontent {
position: absolute;
top: 40%;
bottom: 60%;
}
.scissors {
font-size: 48px;
color: #ed1a24;
position: absolute;
top: 25px;
display: table-cell;
vertical-align: top;
text-align: center;
}
<div class='main'>
<div class="coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<h2>middle center</h2>
<p>middle center</p>
</div>
<p >bottom center</p>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
I have some problems with aligning text to the center:
.list {
width: 100%;
height: 100%;
}
.row {
vertical-align: middle;
width: 100%;
height: 30px;
text-align: center;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>
What I would like to achieve is to get list of names and messages, where each name and message are in one row. But currently, where I am trying to align text in row it doesn't work. Any ideas?
You can do this with display:flex:
.list {
width: 100%;
height: 100%;
}
.row {
display: flex;
justify-content: center;
align-items: center;
text-align:center;
width: 100%;
height: 30px;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 4 years ago.
I am trying to align the icons and text within the boxes here:
I can't seem to get the "Store Locator" and icon to align horizontally.
Can anyone please help me achieve this?
My html:
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator <--- problem line
</div>
</div>
Try to use display:inline-flex here
#container {
text-align: center;
max-width: 960px;
margin: 0 auto;
}
.block {
width: 300px;
height: 120px;
margin: 10px;
display: inline-flex;
background: #3f3f3f;
border-radius: 5px;
font-size: 22px;
align-items: center;
justify-content: center;
}
#phone {
color: yellow;
}
#chat {
color: green;
}
#email {
color: white;
}
#store-locator {
color: grey;
}
.store {
background: url(http://s1.archerssleepcentre.co.uk/i/sprite-2015.svg) no-repeat center left;
background-position: -432px 2px;
position: relative;
right: 10px;
background-size: 1800% auto;
height: 32px;
width: 32px;
display: inline-block;
}
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator
</div>
</div>
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
I try to to set vertical align of elements that exist into a div tag to center.
Please advice
<div class="new_div">
<h3>نام من</h3>
<p>توضیحات من</p>
<button class="btn btn-primary">بیشتر ...</button>
</div>
css
.new_div {
position: absolute;
width: 100%;
text-align: center;
}
You can use display: table-cell;
Jsfiddle
body,
html {
position: relative;
margin: 0;
padding: 0;
}
.new_div {
position: absolute;
width: 100%;
text-align: center;
display: table;
height: 200px;
background-color: red;
}
.container {
display: table-cell;
vertical-align: middle;
}
<div class="new_div">
<div class="container">
<h3>نام من</h3>
<p>توضیحات من</p>
<button class="btn btn-primary">بیشتر ...</button>
</div>
</div>
For vertical center? Try something along the lines of
.new_div {
width: 100%;
height: 100px;
line-height: 100px; /* Same as new_div height */
}
You could try to
use the display attribute
in combination with the vertical-align attribute
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
<h3>نام من</h3>
<p>توضیحات من </p>
<button class="btn btn-primary">بیشتر ...</button>
</div>
</div>
</div>
I need three boxes centered and ordered horizontally. Right now I have the centered but only vertically:
Here is the CSS for the box:
.box {
margin-left: auto;
margin-right: auto;
background-color: #9FDCED;
display: block;
height: 400px;
width: 500px;
}
Any help would be greatly appreciated.
Give the .box a display: inline-block and vertical-align: top to make them be aligned next to eachother. If you surround it with a .container <div> that gets text-align: center the inline content gets horizontally centered.
.container {
text-align: center;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
}
.box--high {
height: 75px;
}
<div class="container">
<div class="box"></div>
<div class="box box--high"></div>
<div class="box"></div>
</div>
A great resource for horizontal and vertical centering using CSS is https://css-tricks.com/centering-css-complete-guide/
.box1 {
display: table;
margin: 0 auto;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 200px;
width: 200px;
}
<div class="box1">
<div class="box" style="background:#cc0000;"></div>
<div class="box" style="background:#cceeff;"></div>
<div class="box" style="background:#eeccff;"></div>
</div>
Just add a float:left; to the .box class. Like this
.box {
margin: 5px;
background-color: #9FDCED;
display: block;
height: 100px;
width: 100px;
padding: 5px;
float: left;
}
Working JSFiddle http://jsfiddle.net/wcvgs1zb/