This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Closed 3 years ago.
I know that this question was asked many many times, but no matter what I try it doesn't work
Here is a part of the html;
<div class="bookmark-container">
<div class="bookmark-set">
<div class="bookmark-title">Daily</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
</div>
</div>
And this is the css (note that I removed my attemps at centering the images because nothing worked);
.bookmark-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 50%;
margin: 1em 0em;
}
.bookmark-set{
padding: 1em;
background-color: #322441;
font-family: "Roboto";
font-size: .85em;
width: 25%;
height: auto;
margin: 0em .5em;
}
.bookmark-inner-container {
height: 80%;
vertical-align: top;
}
.bookmark-title {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin: 0em 0em .35em 0em;
}
.bookmark {
color: #fff;
display: block;
margin: .5em 0em;
}
img {
max-height: .9rem;
margin-right: 6px;
}
Here are the files
You could use flexbox to do that. Just add this to your code:
.bookmark {
display: flex;
align-items: center;
}
Working example: https://jsfiddle.net/ajobi/ajcezv67/4/
Try this
.bookmark-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 50%;
margin: 1em 0em;
}
.bookmark-set{
padding: 1em;
background-color: #322441;
font-family: "Roboto";
font-size: .85em;
width: 25%;
height: auto;
margin: 0em .5em;
}
.bookmark-inner-container {
height: 80%;
vertical-align: top;
}
.bookmark-title {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin: 0em 0em .35em 0em;
}
.bookmark {
color: #fff;
display: flex;
align-items: center;
margin: .5em 0em;
}
.bookmark img{
padding-right: 10px;
}
<div class="bookmark-container">
<div class="bookmark-set">
<div class="bookmark-title">Daily</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
</div>
</div>
Try this:
img {
max-height: .9rem;
margin-right: 6px;
vertical-align: text-top;
}
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
I have tried to using margin: 0 auto; to horizontally center the div elements however I don't understand why the items are always appearing on the left of the HTML page.
body {
background: #f06d06;
font-size: 80%;
}
main {
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
}
div {
display: inline-block;
vertical-align: middle;
height: 100px;
line-height: 100px;
background-color: black;
padding: 50px;
margin: 0 auto;
}
p {
display: inline-block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
}
<body>
<main>
<div>
<p>center align</p>
</div>
</main>
</body>
Could anyone tell me what I am doing wrong?
set text-align:center to main.
main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}
Try This, I Changed div display properties
body {
background: #f06d06;
font-size: 80%;
}
main {
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
}
div {
display: block;
vertical-align: middle;
height: 100px;
width: 100px;
line-height: 100px;
background-color: black;
padding: 50px;
margin: 0 auto;
}
p {
display: inline-block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
}
<body>
<main>
<div>
<p>center align</p>
</div>
</main>
</body>
body {
background: #f06d06;
font-size: 80%;
}
main {
display: block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
}
div {
display: block;
vertical-align: middle;
height: 100px;
width: 100px;
line-height: 100px;
background-color: black;
padding: 50px;
margin: 0 auto;
}
p {
display: block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
}
<body>
<main>
<div>
<p>Center div</p>
</div>
</main>
</body>
Okay, let me explain what is happening over here, you in your post add display inline-block which I changed to block, which means that a particular element main will take up the whole horizontal space, and when you use margin: auto it automatically gives equal margin to both sides, it is working on your code but the thing is you haven't specified the width to the max.
So, whenever you want to center the element using margin: auto, you need to specify the width as 100vh or 100%(if parent div has 100vh)
You have to implement a flexbox or Grid to achieve vertical and horizontal centering! Here I little update on you code
body {
background: #f06d06;
font-size: 80%;
}
main {
display: block;
background: white;
line-height: 300px;
height: 300px;
margin: 20px auto;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
margin:auto;
overflow:hidden;
}
div {
display: inline-block;
vertical-align: middle;
height: 100px;
line-height: 100px;
background-color: black;
margin: 0 auto;
text-align:center;
width:100%;
}
p {
display: inline-block;
vertical-align: middle;
color: white;
margin: 0;
line-height: 1.5;
text-align:center;
}
<body>
<main>
<div>
<p>center align</p>
</div>
</main>
</body>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I am learning CSS grid. While practicing I got an issue. justify-content: center is not centering section-3-nav div.
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
}
.container > .constant {
display: grid;
justify-items: center;
}
.box-top-title > h1 {
font-weight: bold;
margin-top: 2rem;
}
.box-top-subtitle > p {
text-transform: uppercase;
color: #a8b9c0;
margin: 0.5rem 0;
font-size: 15px;
}
.box-top-hr > hr {
width: 250px;
background-color: #00c6bf;
border-width: 0;
height: 1.5px;
}
.section-3 {
background: #eff7fa;
width: 100%;
}
.section-3 > .container > .section-3-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-content: center;
margin: 3rem 0;
width: 50%;
border: 1px solid black;
}
.section-3 > .container > .section-3-nav a {
transition: 0.5s;
}
.section-3 > .container > .section-3-nav a:hover {
background: #ff3150;
padding: 10px 20px;
border-radius: 15px;
color: white;
}
<div class="section-3">
<div class="container">
<div class="constant">
<div class="box-top-img"><img src="./images/2-Bondi---PSD-Landing-Page.png" alt=""></div>
<div class="box-top-title"><h1>We Make This</h1></div>
<div class="box-top-subtitle"><p>Prepare to be amazed</p></div>
<div class="box-top-hr"><hr></div>
</div>
<div class="section-3-nav">
<div>All</div>
<div>Design</div>
<div>Code</div>
<div>Photography</div>
<div>Apps</div>
</div>
<div class="section-3-stuffs">
</div>
</div>
</div>
Where is the problem with the code? Where to fix and what to fix?
It will be very helpful for me if you help to solve the problem.
Thank you.
Usually you should think about positioning an element from the perspective of the parent element, not the element itself.
If you want to center the section-3-nav element as part of a grid layout, you have to either
Do it in the parent element (.container) with justify-content: center or
Use justify-self: center in the element itself
In both cases, the parent element (.container) has to use display: grid, too.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
}
.container > .constant {
display: grid;
justify-items: center;
}
.box-top-title > h1 {
font-weight: bold;
margin-top: 2rem;
}
.box-top-subtitle > p {
text-transform: uppercase;
color: #a8b9c0;
margin: 0.5rem 0;
font-size: 15px;
}
.box-top-hr > hr {
width: 250px;
background-color: #00c6bf;
border-width: 0;
height: 1.5px;
}
.section-3 {
background: #eff7fa;
width: 100%;
}
.section-3 > .container > .section-3-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
text-align: center;
margin: 3rem 0;
width: 100%;
border: 1px solid black;
}
.section-3 > .container > .section-3-nav a {
transition: 0.5s;
}
.section-3 > .container > .section-3-nav a:hover {
background: #ff3150;
padding: 10px 20px;
border-radius: 15px;
color: white;
}
<div class="section-3">
<div class="container">
<div class="constant">
<div class="box-top-img"><img src="./images/2-Bondi---PSD-Landing-Page.png" alt=""></div>
<div class="box-top-title"><h1>We Make This</h1></div>
<div class="box-top-subtitle"><p>Prepare to be amazed</p></div>
<div class="box-top-hr"><hr></div>
</div>
<div class="section-3-nav">
<div>All</div>
<div>Design</div>
<div>Code</div>
<div>Photography</div>
<div>Apps</div>
</div>
<div class="section-3-stuffs">
</div>
</div>
</div>
I am presuming you want to center the div to the page itself.
Try adding:
margin: auto;
It would center the div when used with width: 50%; Else, it would stretch and center.
I was wondering how I can position the text centered horizontally. Centered horizontally with the image. I do not want to use the position: absolute attribute. This is because the length of the right and left text can change and to have an absolute attribute, you need a fixed width/size.
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You can use flexbox to align items horizontally center by adding below code to the parent div
.parent{
display:flex;
align-items: center;
}
This is the running Snippet of your code having this changes
body{
padding: 0;
margin: 0;
font-family: arial;
}
.content{
display: flex;
align-items: center;
}
.right-text {
font-size: 13px;
}
.icon {
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
font-size: 13px;
font-weight: 700;
}
<div class="content">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
You can just simply add a flexbox container and set its property align-items to center.
<div class="container">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
And this is the class container:
.container{
display: flex;
align-items: center;
justify-content: center;
}
Hi If you want vertical align here is the updated snippet
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
top: 10px;
margin: 0 5px;
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You actually need to wrap your right-text, icon and left-text element in childContainer and then wrap your childContainer element in parentContainer wrap.
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
Next, you have to apply FlexBox with center justify-content and align-items value and you also need to add height: 100vh. Mentioned changes are applied on a below code snippet. Try this I hope it'll help you out. Thanks
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
.parentContainer {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 4 years ago.
I am centering inner div insTabsContainer using margin: 0 auto but it's not getting center. Will you guys tell me what's I did wrong here.
HTML
.insTabsContainer {
margin: 0 auto;
}
.insTabs {
position: relative;
float: left;
width: 32%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
<div class="col-sm-12">
<div class="insTabsContainer">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
you can use flex. for this.
.insTabsContainer {
display: flex;
justify-content: center;
}
.insTabs {
position: relative;
float: left;
width: 25%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
.insTabs:last-child {
margin-right:0;
}
<div class="col-sm-12">
<div class="insTabsContainer">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
if you use
margin: 0 auto;
it should have a width, but you can use simply
display:table;
.insTabsContainer {
display:table;
margin: 0 auto;
}
You should set width in order to see that it's center:
.insTabsContainer {margin: 0 auto; width: 90%;}
You can achieve this using flex-box
.insTabsContainer {
}
.insTabsContainer:after {
content: "";
display: table;
clear: both;
}
.insTabs {
position: relative;
float: left;
width: 10%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
justify-content: center;
}
<div class="col-sm-12 text-center">
<div class="insTabsContainer d-flex">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I've tried vertical-align: middle; and margin: auto 0; but it doesn't seem to be working? Is there something I'm missing here? My logic is, I put the vertical-align: middle; in the parent container. Shouldn't that center the "children" class into the center vertically? I've also tried adding, padding:auto 0; to the "children" class but that didn't seem to do anything either...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
Try to use display:flex here in the parent class .content and margin:auto in .children class to center it horizontally and vertically...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
However vertical-align works on tables with display:table-cell...and also you will need to apply vertical-align:middle in the elements itself not in the parent
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
use flex method to vertical align.
https://jsfiddle.net/raj_mutant/529bcr98/