This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 5 years ago.
I have been looking for tutorials how to center text in link.
Nothing helped. Could you help me out?
HTML:
<nav>
<a class="but1" href="#"><strong>ART</strong></a>
<a class="but2" href="#"><strong>VIDEOS</strong></a>
<a class="but3" href="#"><strong>ABOUT</strong></a>
<a class="but4" href="#"><strong>CONTACT</strong></a>
</nav>
CSS:
nav a {
font-size: 500%;
text-decoration: none;
color: white;
Height: 25%;
width: 100%;
position:absolute;
text-align: center;
vertical-align: middle;
transform: translate(-50%, -100%);
left: 50%;
}
.but1 {
background-color: #e24e42;
top: 25%;
}
.but2 {
background-color: #e9b000;
top: 50%;
}
.but3 {
background-color: #eb6e80;
top: 75%;
}
.but4 {
background-color: #008f95;
top: 100%;
}
I am starter in Web development. To be exact 2 days. If there are HUGE Mistakes, don't judge me.
Vertical alignment in CSS was a nightmare just a few years ago.
To try something like vertical-align: middle; means that you didn't even bothered to google it at all.
I woke up from that nightmare the moment I found flexbox. Take a look at this super complete guide on how to flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think it's appropriated to create navigation menus, I use flexbox every time for that purpose.
EDIT:
I have been there and I know how hard small things can get in the beginning. Keep in mind that if you want to get serious in web design this will happen a lot and you must know how to deal with it alone.
Take a look at this fiddle: http://jsfiddle.net/ZTz7Q/2651/
You will notice that we only apply css flexbox properties on the parent element, defining how the children should be displayed:
align-items: center This is responsible for vertically center your content on the main axis (horizontal by default).
justify-content: flex-start This will align your content on the main axis, pretty much like text-align:left
Take some time to understand the code instead of copy and pasting it. It will help you to improve.
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I know this question has been asked to death but I can't seem to make any of the solutions work. Please be sympathetic, I have been trying for days!
I want to vertically centre everything in the header element at the centre of its height. Eventually I plan on heaving a little logo, title and navigation links in the header. While the logo and title are floated to left, the navigation links need to stay floated to the right.
Why is vertical alignment made SO HARD in html/css!
I'd prefer a solution that does what I want directly and not consequently by fixing/padding/adjusting things around the elements but if that is the only way then fine. Here is what I have so far.
* {
border: 1px solid black
}
header h1 {
display: inline;
}
header nav {
display: inline;
float: right;
}
<header id='header'>
<h1>Obla Di Obla Da</h1>
<nav id="nav">
Evil |
Not Yet Evil
</nav>
</header>
Floats and inline elements are a nightmare when it comes to the vertical axis. You should take a look at using Flexbox - it really excels with intra-element positioning - namely its align-items: center property value (assuming you're using a flex row and not a flex column at which point you'll want justify-content: center)
Take a look at this snippet
* {
border: 1px solid black
}
#header {
background: #0095ee;
color: #fff;
}
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.space-between {
justify-content: space-between;
}
<header id='header' class="flex align-center space-between">
<h1>Obla Di Obla Da</h1>
<nav id="nav">
Evil |
Not Yet Evil
</nav>
</header>
The other way that you see quite a bit is to use an absolute position on a a child, set the top to 50%, and set it's transform X translation to -50%, though this is less common now, due to the expanse and ease-of-use of flex, and the inherent issues that come with removing elements from the document flow.
.parent { position: relative; }
.vertical-child {
position: absolute;
top: 50%;
transform: translateX( -50% );
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I can't get a div #buttonwrap to center on my site. I have tried every option that is suggested in this similar post. But it still doesn't work. And what is strange is that #backgroundwrap works fine with the same code. I have linted my CSS and HTML markup, but no help.
Hope someone can help me solve this issue, it has been driving me crazy and delete nearly all my code! The full code is online here: http://setup.industries/projects/masqueradeclassix/
.buttonwrap {
margin: 0 auto;
position: relative;
width: 100%;
display: block;
float: none;
}
/* parent */
#container {
width: 100%;
height: 100%;
}
width: 100%;
margin: 0 auto;
It's 100% wide, with auto margins.
So the margins are computed to put it in the center.
i.e. 0 on the left and 0 on the right.
It is centered.
Alright, this is what you need. I really wanted you to find out the solution from there, but here you go:
.buttonwrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Preview
If the width is 100%, it makes no sense to center the element using margin: 0 auto; - it already fills the width of its container. Make the width a value smaller than 100%, or a fixed pixel value.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
CSS center display inline block?
(9 answers)
Closed 4 years ago.
I was wondering how I can center inline-blocks. Any help?
I tried doing margin-top: x em; but all it did was have the image go down. This inline-block is deliberately inside an image block. If you have links that show me how to position inline-blocks, I will gladly take them into consideration, as I am still learning how to do CSS and HTML.
#img-banner article {
border: solid thick white;
box-sizing: border-box;
display: inline-block;
width: 14em;
position: static;
}
#img-banner h1 {
font-family: 'Lobster', cursive;
text-align: center;
color: white;
font-size: 27px;
}
<span id="img-banner">
<article>
<h1>Introduction</h1>
</article>
</span>
It would be important that you include the properties of the containing span as this is the parent you need to align on. Assuming you want to vertically center your element, you need to ask yourself if the height of your containing element is known and that will guide you towards the proper centering technique.
https://css-tricks.com/centering-css-complete-guide/
You will find alot of common centering techniques on this website. You can consider your inline-block element as a block-level element.
Personally, I like making sure my container is position:relative and then add top:50%; transform: translateY(-50%) to my unknown height positioned elements.
Edit : As noted in your comments, this HTML is invalid. Only inline elements are allowed in a span. I don't know why I overlooked this.
Hi i am very new at html and css and i have just started to learn. I want to center two tags next to each other so they are completly in the middle of the page with all the text and content inside it. I have almost got it to work but the section boxes are a bit to te left... I have no idea how to fix it right now so i hope you could help :)
Here are the css:
section{
text-align: center;
background-color: #ffffff;
border-style: dotted;
float: left;
width: 45%;
height: auto;
padding: 10px;
margin: 5px;
}
The site then looks like this:
Site
The modern and easy way of doing this is by using flexbox. You can do this by giving a container-div (or any semantic version of the div - main, article etc.) the following properties:
#container {
display: flex;
justify-content: center;
}
<div id="container">
<section>Content</section>
<section>Content</section>
</div>
Instead of center you can also use space-between/space-around depending on what you want to do.
https://jsfiddle.net/3qk981mk/1/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Fun game to learn the flexbox technique:
http://flexboxfroggy.com/
If you want to do it the old school way, you would use the following css on the container:
margin: 0 auto;
That would give 0 margin vertically and center the content horizontally.
But go with flexbox, it's cool as heck!
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)