This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm trying to do a navigation bar in CSS with two buttons on the left side and one image on the right. The problem is that my image has to fit the size of the navigation bar, and at the same time, it has to be vertically centered. If anyone could help me solve this, I would be truly glad.
Solution: I ended up solving it by using "flex" and "margin" (the navigation bar display property was set to flex and the icon margin-left was set to auto, making it go to the right of the flex row). Here is a code example: https://jsfiddle.net/572bag0z/#&togetherjs=QJn2LqjxTQ
.top-nav {
position: fixed;
display: flex;
overflow: hidden;
background-color: white;
align-items: center;
height: 4em;
width: 100%;
box-shadow: 0 .5px 4px;
}
.top-nav a {
float: left;
color: #f2f2f2;
text-align: center;
text-decoration: none;
color: black;
text-transform: uppercase;
font-weight: 600;
padding: 2em;
}
.top-nav img {
width: 3em;
margin-left: auto;
margin-right: .75em;
}
Generally and historically, centering elements along the vertical axis has been a pain. Things have gotten much better though, and now there are some pretty easy ways to about it. I'd recommend looking into using flexbox's align-items property.
I think the easiest way of doing this is adding
margin-top:auto; margin-botom:auto; to the img and display:flex; or display: grid; to the container. It wouldn't work without flex or grid.
Codepen: https://codepen.io/thescv/pen/YzqrLeK
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 months ago.
Im trying to center the div "input" below the div "InputBelow" by using "flex-direction: column".
However when I try to use it, it breaks the "justify-content; center".
I want to both center the main div "border" in the middle of the screen, while aligning the other 2 elements inside of it.
.border {
height: 300px;
width: 700px;
margin: auto;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
border: 3px solid;
border-radius: 45px;
border-color: black;
display: flex;
justify-content: center;
flex-direction: column;
/* If I remove this, justify content works fine. If I add it, justify-content just stops working */
}
.calcText {
color: black;
font-size: 44px;
margin: 35px;
}
.value {
height: 10px;
width: 50px;
}
<div class="border">
<div class="calcText">Input Below</div>
<input class="value" type="text">
</div>
Thanks to Amaury for the solution. For some reason I thought aling-items was for vertical alignment and justify-content for horizontal alignment.
Turns out I had to remove justify content.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
Good morning everyone.I want to try to tell you about my flexbox problem. I searched a lot on the internet (some days), maybe i maybe i was looking badly on the google ? but unfortunately I did not find the answer to my question. My problem is that when I want to apply persistence align-items: center; for flexbox, it doesn't work. I just want it to auto-center, both horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>flex-box</title>
<link rel="stylesheet" href="css/flex.css">
</head>
<body>
<div class="header">
<div class="align-header">
<nav class="navigation">
<ul class="my-ul-links">
<li class="link">Home</li>
<li class="link">Forum</li>
<li class="link">Catalog</li>
</ul>
</nav>
</div>
</div>
<div class="wallpaper"></div>
</body>
</html>
I even went to the official documentation MDN but unfortunately, I didn’t find there how to use flexbox together with the tag nav and ul, nested in li + a. Very weird. Maybe I don't understand something.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #eee;
}
.header {
background: white;
width: 100%;
height: 50px;
}
.align-header {
width: 800px;
height: 100%;
margin: 0px auto 0px auto;
}
.my-ul-links {
display: flex;
justify-content: center;
align-items: center; /* does not working */
}
.link {
padding: 0px 10px 0px 10px;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
I will be very grateful if you can help me with this problem. Thank for early.
Serj1c is right about the flex-direction.
If you want your align-items: center to work, please make sure that the li height and width are not 100%.
you can always use the new stuff, like
place-items: center || place-content: center.
. works like a charm
What are you trying to achieve? "align-items" does not center items horizontally and vertically. it simply aligns them acc.to cross-axis of your "flex-direction". for instance, if your "flex-direction: column" than "align-items: center" will align them horizontally. to center items along the main-axis of your flex-direction use "justify-content"
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I've created a div in HTML:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
vertical-align: middle;
font-size: 20px;
height: 80px;
}
...
<div class="Div">
Just testing my Div.
</div>
...
Output:
I want the text to be in the middle of this rectangular, vertically and horizontally. How should I make it happen?
To be mentioned, I didn't use this div inside the main body, it's used inside another div; But in that i also have text-align: center;. I don't know if it's important; But i can provide more details about this code if needed.
P.S: I'm very new to css and html. Please accept my apologies if this code doesn't meet some standards.
There are several ways to do this. Since you, yourself tried to use vertical-align in the first place, so vertical-align will only work with display: table-cell;. In order to achieve it, you should set your div, display to table-cell and then you should also define a specific width for your div (I just went with 100vw to fill the available viewport).
So your final code should be something like this:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 20px;
height: 80px;
width: 100vw;
}
<div class="Div">
Just testing my Div.
</div>
But if you want some generic approach for this you should use flexbox instead. In order to use flexbox, you should define three specific properties to meet your requirement.
display: flex;. This will indicate your div as flex items and then their children should follow flex rules.
align-items: center;. This will indicate all of your items should align in the middle of your div horizontally.
justify-content: center;. This will indicate all of your items should align in the middle of your div vertically.
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
You may use display: flex;, justify-content: center; and align-items: center in your class Div
You may go http://howtocenterincss.com/, to auto-generate the code that centre text, image or div.
.Div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 1px;
/* text-align: center;
vertical-align: middle; */
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 8 years ago.
This is my code:
#homeButtonText{
font-size: 25px;
text-align: center;
}
Here's how it looks:
How do I get the text on the inside to be right in the center.
I have tried,
vertical-align: middle;
with no success. Any help is appreciated!
have you set height to your div? You can use line-height
Check this here: demo
Solutions:
FIRST - QUICKEST:
set line-height:(button height) to the #homeButtonText
SECOND - RECOMMENDED
use padding, like this:
padding:10px 20px;
so the text will be in center and you will have full control
You could use display: table-cell and vertical-align: middle
.button {
background: #DDDDDD;
width: 200px;
height: 80px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #000000;
}
<div class="button">Home
</div>
Have you tried positioning the text absolutely inside the div?
Something like:
top:50%;
left:50%;
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am trying to vertically center two <p> elements.
I followed the tutorial at phrogz.net but still the elements get placed above the div, below the div, top-aligned within the div.
I would try something else but most of the questions here just point back to that tutorial.
This snippet is for a banner that is on the top of a web page.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}
<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p>
<p>vertically centered</p>
</div>
</div>
<div class="clear">
</div>
</div>
How to Center Elements Vertically, Horizontally or Both
Here are two ways to center divs within divs.
One way uses CSS Flexbox and the other way uses CSS table and positioning properties.
In both cases, the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
Here's the HTML for both:
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
CSS Flexbox Method
#container {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
border: 1px solid black;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
DEMO
The two child elements (.box) are aligned vertically with flex-direction: column. For horizontal alignment, switch the flex-direction to row (or simply remove the rule as flex-direction: row is the default setting). The items will remain centered vertically and horizontally (DEMO).
CSS Table and Positioning Method
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
.box {
width: 300px;
padding: 5px;
margin: 7px auto;
text-align: center;
}
DEMO
Which method to use...
If you're not sure which method to use, I would recommend flexbox for these reasons:
minimal code; very efficient
as noted above, centering is simple and easy (see another example)
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Add the following:
display:table; to bannerRight
display:table-cell; and
vertical-align:middle; to bannerrightinner
I have not tried this, please give me feedback if it does not work. ;)
EDIT: forgot to mention: take 'float' and 'position' properties off