If you take a look at this JSFiddle Code: http://jsfiddle.net/80cfd39u/
I'm making a Navigation bar, but the text isn't center aligned Horizontally.
#menu-list a {
height: 40px;
color: #fff;
padding-top: 20px;
display: block;
text-decoration: none;
}
There may be a lot of guides/help out there, but it's not clear what code they're using to make it Centered.
I know there is currently code in the CSS to put 20px Padding above the text, but if i just remove that it sits at the top of the button, which is my current temporary solution.
Thanks!
EDIT: Here's what i mean by the center alignment
http://i.imgur.com/Iw5ecwF.png See how the "Fashion Accessories" is centered horizontally
Here is the updated fiddle http://jsfiddle.net/80cfd39u/2/. I have modified the #menu-list a CSS as below
#menu-list a {
height: 60px;
color: #fff;
display: table-cell !important;
text-decoration: none;
vertical-align: middle;
text-align: center;
width:117px;
}
Related
Trying to center div that contains a group of <a> tags, that is contained in a nav in a div as such in code provided. Not sure how to, and also want to understand which selector I use and why for aligning it to the center.
I tried text-align: center; on the div "top-nav-2". I don't want to use flexbox or grid, just basic floats, text-align, etc
/* HTML */
<nav class='top-nav'>
<div class="top-nav-2">
<a class="weed" href="#">Shitendo</a>
Pilates-Station: Move
Micro-Box
SEGA-Genitalia
Trash Bin
</div>
</nav>
/* CSS */
/* Nav bar */
.top-nav{
display: block !important;
background-color: #003371;
height: 51px;
}
.top-nav-2 > a{
display: inline-block;
text-align: center;
margin: 15px 5px;
font-size: 15px;
text-decoration: none;
color: #addeeb;
border-left: 10px;
}
Trying to make it look like website https://www.ebgames.com.au/
I'd go with the old display: inline-block and text-align: center; way of doing this, although you could use flexbox if you'd prefer.
.top-nav{
display: block;
text-align: center;
background-color: #003371;
height: 51px;
}
.top-nav-2 > a{
display: inline-block;
text-align: center;
margin: 15px 5px;
font-size: 15px;
text-decoration: none;
color: #addeeb;
border-left: 10px;
}
<nav class='top-nav'>
<div class="top-nav-2">
<a class="weed" href="#">Shitendo</a>
Pilates-Station: Move
Micro-Box
SEGA-Genitalia
Trash Bin
</div>
</nav>
Here's the flexbox version, in case you want to see it:
https://jsfiddle.net/6j2upgz7/
.top-nav-2 {
text-align:center;
}
Add this styling to your code, if you only want to set the center to top-nav-2
Or you can add text-align:center to the top-nav that you already have
I am new to stackoverflow and have searched through some of the other answers and tried a lot of different things but can't seem to get it right.
I need to vertically align the 'Hide Message' button with the paragraph of text so that the button appears in the centered alongside the text (jsFiddle link below). The button also needs to align with another div on the page so it has to have:
position: fixed;
right: 50px;
The main problem I am having with some of the other solutions is that if you shrink the browser, it doesn't stay vertically aligned with the text:
http://jsfiddle.net/d3R6v/2/
I don't think position: fixed; is a way to go here, instead of using fixed you should be using absolute but before that assign position: relative; to the parent element and modify your #hideMessage as
#hideMessage {
display: inline-block;
padding: 5px 10px;
background-color: #555;
color: #fff;
cursor: pointer;
position: absolute;
right: 50px;
top: 50%;
margin-top: -15px; /* Negate 1/2 the total height of the button,
this value currently is approx */
}
Demo
The reason I insisted position: absolute; is because that it will align related to the parent element whereas using fixed is relative to the viewport.
For more information over positioning, you can refer my answer here
If you have dynamic text
Coming to more cleaner solution, it would be better if you use display: table; for the parent element, and display: table-cell; for the child elements, and for the parent element of the button i.e now display: table-cell;, you can use vertical-align: middle; to vertically align the button to the dynamic text on the left hand side and also on resize, the button won't overlap the text.
Demo 2
#parent {
background-color: #bbb;
color: #fff;
width: 100%;
padding: 10px;
display: table;
}
#text {
width: 80%;
display: table-cell;
}
#hideMessage {
display: table-cell;
color: #fff;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
#hello {
background-color: #555;
padding: 5px 10px;
white-space: nowrap; /* Add if you want to prevent the
button to wrap on resize */
}
I came across this behavior recently when a client reported that some of the buttons on a page had vertically centered text while others did not.
As it turns out, buttons will vertically center text inside them but links won't. Example here: http://jsfiddle.net/valentin/7EjtD/
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: inline-block;
vertical-align: top;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Is there any way to add this behavior to links as well outside of using line-height?
Button aligns to the middle because is its default behavior. Your fiddle is aligning top actually. To make it work you can wrap your elements on an display:table element, like a div. Then set the button and the link to be display:table-cell. Then your vertical-align will work. Like this:
<div class="wrapper">
LINK
<button>BUTTON</button>
</div>
And the css:
*{
box-sizing: border-box;
}
div.wrapper {
display:table;
}
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: table-cell;
vertical-align: middle;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Buttons are inline-block elements, while anchors are just inline. You can use padding to achieve the same effect:
a
{
padding: 91px 20px; /* <---(height-fontSize)/2 */
height: auto;
}
JSFiddle
TableData (TD AKA cell) are pretty damn good at default text centering ;)
live demo
a{
display: table-cell;
vertical-align: middle;
}
for clean-code-sake i'd use a special class like:
a.buttonAlike{
Sorry folks! Didn't see he wanted to avoid line-height. Original post:
Add line-height equal to the height of your element. In this case:
line-height: 200px;
DEMO: JSFIDDLE
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.
Problem
So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:
The follow are my HTML and CSS:
HTML
<div id="tabcontent-container">
<div class="tabcontent-menu">
WLAN Jumpstart
Mobility
Guest Access Jumpstart
</div>
</div>
The CSS
#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }
Working example on Jsfiddle.net
The Question
I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.
Any suggestions?
You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a
http://jsfiddle.net/H9VHs/8/
I usually accomplish something like this by varying the line-height.
.tabcontent-menu a.midline {
line-height: 64px;
}
See it here: http://jsfiddle.net/PZVnq/
Documentation/Further Reading
CSS line-height on MDN - https://developer.mozilla.org/en/CSS/line-height
Lauri Raittilan on Vertical centering with CSS - http://www.student.oulu.fi/~laurirai/www/css/middle/
Vertical centering with CSS on vanseodesign.com - http://www.vanseodesign.com/css/vertical-centering/