I'm sure this has been answered before, but I can't seem to find it anywhere.
I have a toolbar with links:
Once I resize the browser, text reflows:
The question is how do I center that text after the reflow? text-align doesn't help here, neither does margin: 0 auto.
The HTML looks like this:
<div class="desktop">
<div>
<a class="root-nav-links" href="/details">Event Details</a>
</div>
<div>
<a class="root-nav-links" href="/details">...</a>
</div>
...
</div>
CSS:
.desktop {
display: flex;
align-items: center;
}
.root-nav-links {
margin: 0 15px;
padding: 2px 6px;
}
Use display: block & text-align: center property on .root-nav-links, like:
.root-nav-links {
display: block;
text-align: center;
margin:0 15px;
padding:2px 6px;
}
Have a look at the snippet below (try compressing the browser width):
.desktop {
display: flex;
align-items: center;
background: #6440C0;
padding: 10px 0;
}
.root-nav-links {
text-decoration: none;
display: block;
text-align: center;
margin: 0 15px;
padding: 2px 6px;
color: white;
}
.root-nav-links:hover {
color: white;
text-decoration: underline;
}
body {
margin: 0;
}
<div class="desktop">
<div>
<a class="root-nav-links" href="/eventdetails">Event Details</a>
</div>
<div>
<a class="root-nav-links" href="/schedule">Schedule</a>
</div>
<div>
<a class="root-nav-links" href="/floorplan">Floor Plan</a>
</div>
<div>
<a class="root-nav-links" href="/details">Directory</a>
</div>
</div>
Hope this helps!
div -> text-align: center
links -> block
.desktop {
display: flex;
align-items: center;
align-content: center;
}
.desktop div {
text-align: center;
}
.root-nav-links {
display: block;
margin: 0 15px;
padding: 2px 6px;
}
<div class="desktop">
<div>
<a class="root-nav-links" href="/details">Event Details</a>
</div>
<div>
<a class="root-nav-links" href="/details">...</a>
</div>
</div>
.desktop {
display: flex;
align-items: center;
}
.root-nav-links {
margin: 0 15px;
padding: 2px 6px;
display: inline-block;
text-align: center;
}
<div class="desktop">
<div>
<a class="root-nav-links" href="/details">Event Details</a>
</div>
<div>
<a class="root-nav-links" href="/details">Long Long Word</a>
</div>
</div>
It looks like treating each element as an inline block and adding align-center to them should center the text when the words are forced onto multiple lines. Based on the comments I'm now less certain this is what you were asking about.
It should be like this:
Html
<div class="desktop">
<div class="extra-div">
<a class="root-nav-links" href="/details">Event Details</a>
</div>
</div>
Css:
.extra-div {
display:flex;
align-items: center;
}
.root-nav-links {
margin: 0 15px;
padding: 2px 6px;
}
jsfiddle: https://jsfiddle.net/622L0mqz/
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
once again I have a problem with centering elements. I have this HTML/CSS:
<section class="btmfix">
<div class="menurow">
<div class="col">
<a class="sml-btn" href="index.html">HOME</a>
</div>
<div class="col">
<a class="sml-btn" href="about.html">ABOUT</a>
</div>
<div class="col">
<a class="sml-btn" href="product.html">PRODUCT</a>
</div>
<div class="col">
<a class="sml-btn" href="request.php">REQUEST</a>
</div>
<div class="col">
<a class="sml-btn" href="contact.html">CONTACT</a>
</div>
</div>
</section>
.menurow {
height: auto;
display: inline-block;
margin: 0 auto;
width: auto;
}
.btmfix {
display: block;
padding-bottom: 0px;
}
.col {
padding: 0px;
display: block;
}
.sml-btn {
color: #000;
text-decoration:none;
background-color:#444;
margin: 3px;
width: 180px !important;
/* width:auto !important;*/
padding: .3rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
display: inline-block;
/* font-weight: 00;*/
text-align: center;
vertical-align: middle;
border: 1px solid #fff;
cursor: pointer;
text-transform: uppercase;
text-shadow: 1px 0px #fff;
}
https://jsfiddle.net/crapomat/pLt5j0sy/5/
I want the links to be centered, but I cant figure out how. I tried the margin: 0 auto; method, this is found in almost every tutorial, but it doesn't work here. Do you know why? Can you help me?
Thx in advance
To center menu horizontally you need to apply text-align: center; on .col class.
Here is the working example:
.menurow {}
.btmfix {
display: block;
padding-bottom: 0px;
}
.col {
padding: 0px;
text-align: center;
}
.sml-btn {
color: #000;
text-decoration:none;
background-color:#444;
margin: 3px;
width: 180px !important;
padding: .3rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
display: inline-block;
text-align: center;
vertical-align: middle;
border: 1px solid #fff;
cursor: pointer;
text-transform: uppercase;
text-shadow: 1px 0px #fff;
}
<section class="btmfix">
<div class="menurow">
<div class="col">
<a class="sml-btn" href="index.html">HOME</a>
</div>
<div class="col">
<a class="sml-btn" href="about.html">ABOUT</a>
</div>
<div class="col">
<a class="sml-btn" href="product.html">PRODUCT</a>
</div>
<div class="col">
<a class="sml-btn" href="request.php">REQUEST</a>
</div>
<div class="col">
<a class="sml-btn" href="contact.html">CONTACT</a>
</div>
</div>
</section>
you are given width:0; to menurow that is the issue and add col to text-align:center
.menurow {
width: 100%;
}
.col {
text-align: center;
}
If you want to take all menu group to center text-align:center; is enough
.btmfix {
display: block;
padding-bottom: 0px;
width: 100%;
text-align:center;
}
If you also want to show menu horizantally then float:left; is enough
.col {
padding: 0px;
display: block;
float:left;
}
I need two of my main buttons to have the same sizes, I'm still new to web development so I have no clue.
I currently have the following HTML and CSS for the index.html
<body>
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
And then created a center class and 2 different button classes.
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
This is the output:
https://leonisgeweldig.be/stackoverflow/
Give both buttons same width and reduce the font-size
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.container{
position: relative;
}
.center{
position: absolute;
top: 50%;
left: calc(50% - 210px);
color: white;
}
<body>
<div class="container">
<img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
</div>
</div>
</body>
You can add a width and an align center to the classes:
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
a{text-decoration:none;}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
Avoid wrapping block level element with inline element.
Also you can define common button class for both these buttons and add another
class which defines
background color to differentiate.
so you can write HTML and css more semantic as:
.button{
padding: 20px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 150px;
text-align:center;
margin:0 10px;
color: #fff;
text-decoration: none;
}
.background-grey{
background: grey
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#" class="button">
<i class="fas fa-bell"></i>
<span> Update</span>
</a>
<a href="#" class="button background-grey">
<i class="fab fa-paypal"></i>
<span> Support the project<span>
</a>
<div>
Simply give them same width.
.button1,
.button2 {
min-width: 250px !important;
text-align: center;
font-size: 18px;
margin: 10px 15px;
box-sizing: content-box;
}
.button1 {
padding: 20px 60px;
background-color: #00B056 !important;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
a {
text-decoration: none;
color: white;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#">
<h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
</a>
<h1 class="button2"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</h1>
<div>
</div>
</div>
<div>
I would like to create a right aligned navbar. Each link item should contain an image and a text. When having text only this code works fine
#navbar {
height: 60px;
display: grid;
justify-content: end;
padding: 20px;
background: red;
align-items: center;
}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}
<div id="navbar">
<div>
Home
About
Projects
Contact
Imprint
</div>
</div>
Now I added images and texts to the link item and built a wrapper around these elements.
#navbar {
height: 60px;
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
margin: 0 60px;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
Unfortunately the CSS breaks now. How can I fix it so that each link item is aligned to the right, centered vertically and is placed along the navbar?
I achieved it using flexbox
https://jsfiddle.net/q48tyuac/
but maybe there is a better solution using the grid attribute. Because when you lower the screen size these elements are fixed and I would like them to break to the next row if there is no space left.
use flex-wrap:wrap;
#navbar {
/* height: 60px; */
display: flex;
justify-content: flex-end;
padding: 20px;
flex-wrap:wrap;
align-items: center;
background: red;
/* margin: 0 60px; */
}
https://jsfiddle.net/6p03s5cm/
if you dont want to use flexbox with grid you can target #navbarLinkContainer and do it with columns
#navbar {
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
display:grid;
grid-template-columns:repeat(3 , 1fr) ;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
I'm trying to add filter options to my filter area but have been unsuccessful so far. Text appears just fine, but things like text boxes, radio boxes, buttons, etc aren't appearing for some reason. Probably a simple fix, but I'm very new to CSS, HTML and design in general. If anyone could point me in the right direction, that would be awesome!
Screenshot: https://i.imgur.com/5KwXys4.jpg
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='links'>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</div>
<div class='header-container'>
<div class='header'>
<div class='logo'><img src='images/postloco.svg'/></div>
</div>
</div>
<main>
<input id="toggle" type="checkbox">
<label for="toggle">
<div class="filterbutton"><img src='images/filterbutton.svg'/></div>
</label>
<div id="expand">
<section class="Filter">
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</section>
</div>
</main>
<section class="carousel">
</section>
</body>
<footer>
<img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
<img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
<img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
<img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
<ul>
<a alt="about" title="About" href="#" class="footerlink">About</a>
<a alt="about" title="About" href="#" class="footerlink">Contact</a>
<a alt="about" title="About" href="#" class="footerlink">Team</a>
<a alt="about" title="About" href="#" class="footerlink">Whatever</a>
</ul>
</footer>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.menu-container {
color: #fff;
background-color: #A34F43;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
.menu {
width: 100%;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.links {
display: flex;
justify-content: flex-end;
}
.login {
margin-left: 20px;
}
.header-container {
background-color: #FF7C69;
display: flex;
justify-content: center;
}
.header {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel-test {
display: flex;
justify-content: center;
}
.carousel-grid-container {
display: flex;
justify-content: center;
}
.carousel-grid {
width: 900px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.logo {
width: 200px;
display: block;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
width: 100%;
}
main {
background: #FF7C69;
width: 100%;
margin: 0px auto;
}
input {
display: none;
visibility: hidden;
}
label {
/* display: block; */
/* text-align: center; */
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
label:hover {
color: #000;
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.3s;
background-color: #D6DBED;
color: black;
}
#toggle:checked ~ #expand {
height: 250px;
}
footer {
background-color: #A34F43;
text-align: right;
color: #eee;
text-align: center;
position: absolute;
width: 100%;
/* display: flex; */
}
.footerlink {
text-decoration: none;
color: white;
text-align: justify;
display: block;
padding: 1px;
}
.social {
padding: 10px;
width: 50px;
text-align: right;
float: right;
}
.social:hover {
opacity: 0.7;
}
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
.filterbutton {
margin: 0px;
padding: 0px;
width: 150px;
display: block;
}
In your css you have this line that is hiding all form inputs
input {
display: none;
visibility: hidden;
}
I don't think you want to globally hide all inputs like this. If you need to hide certain input items you can group them either by css or by putting them in special HTML tags (divs for instance)
I see that you are having your main form expand after clicking a checkbox. In this case things should still work after removing the line above.
How do I put these <a>'s in the center of the div, next to each other with 40px of space in between them inside of a 100% width div?
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
You can do this by using display:flex and justify-content:center on #container
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
a.explore:first-child {
margin-right:40px;
}
#container {
width: 100%;
display:flex;
justify-content: center;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
These aren't buttons...they're links...there's a difference.
However, flexbox is ideal here:
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
display: flex;
justify-content: center;
padding: 1em;
background: #c0ffee;
}
a:first-child {
margin-right: 20px;
}
a:last-child {
margin-left: 20px;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>