This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
https://jsfiddle.net/2L9mznzu/
There are two empty text button, how to align them into a row?
.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
}
<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>
Use vertical-align: top property to your .button.
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Source: MDN
See demo below:
.button {
display: inline-block;
vertical-align: top;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
}
<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>
just add vertical-align: middle;
.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
vertical-align: middle;
}
You can wrap them inside a container div and use display:flex; this way they will always be aligned to the vertical center of the container div.
.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
}
.container{
display:flex;
flex-direction:row;
align-items:center;
}
<div class="container"><div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</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:
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>
I am trying to achieve something that looks like this:
I don't know how many green elements will be rendered, because that is determined by the CMS and how many components the author decides to put in there.
The requirement is that there are 5 boxes per row before it wraps.
The problem is: margin: auto doesn't work when I set the red wrapper to inline-block.
div.container {
background: black;
padding: 10px;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
just add text-align center to div.container
As Muhammad Usman suggested, add text-align: center to .container. The text-align-property always refers to the content of the target element.
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
Give the container div this property
text-align: center;
Here's a fiddle
Centering with margin: auto doesn't work for elements that have inline-block as display property.
You can, however, just center such elements by setting the text-alignment of their parent elements to center. Then, (re)set the text-alignment of the elements you want to center to whatever text-alignment you need there.
Demo
.container {
background: black;
padding: 10px;
text-align: center; /* Center */
}
.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
text-align: left; /* Reset alignment */
}
.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
See also this Fiddle!
How do I target just the text inside the div in order to make the numbers center in the circles? https://jsfiddle.net/Amidi/nevg4gcq/3/
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
}
Just give line-height: 35px; to make text center. line-height equals to height of the div.
Working Fiddle
Use display:table for parent and display: table-cell for cell. You must have child element for this approach.
Try this:
.beads {
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
display: table;
}
.beads span {
display: table-cell;
vertical-align: middle;
}
<div class="beads"><span>1</span>
</div>
<div class="beads"><span>2</span>
</div>
<div class="beads"><span>3</span>
</div>
<div class="beads"><span>4</span>
</div>
<div class="beads"><span>5</span>
</div>
<div class="beads"><span>6</span>
</div>
<div class="beads"><span>7</span>
</div>
Fiddle here
try this:
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
line-height: 35px
}
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 8 years ago.
I have HTML and CSS below :
.lpanel{
text-align: center;
height: 50px;
}
.logo{
display: inline-block;
font-size: 25px;
}
.slogan{
display: inline-block;
vertical-align: middle;
line-height: 50px;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
I know can using display:table for .lpanel and display:table-cell for .slogan to vertical middle this slogan div but I can't do this because when I add display:table for .lpanel then 2 class .logo and .slogan not align center.
You can see picture :
How to fix this ?
Thanks you so much.
add vertical align to both the elements
.lpanel {
text-align: center;
height: 50px;
}
.logo {
display: inline-block;
font-size: 25px;
vertical-align: middle;
border: 1px solid red;
}
.slogan {
display: inline-block;
border: 1px solid red;
vertical-align: middle;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
try this example..
.lpanel {
text-align: center;
height: 50px;
}
.lpanel div {
vertical-align: middle;
}
.logo {
display: inline-block;
font-size: 25px;
}
.slogan {
display: inline-block;
vertical-align: middle;
line-height: 50px;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
.lpanel{
margin-top:50px;
text-align: center;
height: 50px;
vertical-align: middle;
line-height: 50px;
}
.logo{
display: inline-block;
font-size: 100px;
}
.slogan{
display: inline-block;
float: top;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>