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>
Related
How can I separate the cards in my project; I am new to HTML and am still learning so I don't know how to do this. I don't like how the cards are right up next to each other; is there any way I can fix this?
Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.gameshell{
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
</body>
</html>
There is a lot of duplicated and unnecessary code. Try removing it.
To increase the gap between div elements you can use the gap property.
Check out the docs here.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 1rem;
/*newly added*/
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
Try grid for making layouts like this, it comes quite handy.
But right now I am guessing you are learning flex.
There are two ways you can do this.
First: the flex way
gap: 10px;
the gap property is actually quite great. It works just like its literal meaning. It produces a gap between your flex childs, Horizontally and vertically too.
Second: the css way
.card{
margin: 10px; //quite simple actually :)
}
try gap though (works with grid too)
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'm currently working on a site for a small business when i ran into a problem, when trying to apply a border radius to a div it only applies it to the left side, i have searched google and stack overflow for a similar answer but haven't found anything.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
background-color: #e0e0e0;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
If anyone has an answer it would be greatly appreciated
The background color is overlapping the header div.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
/*background-color: #e0e0e0;*/
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
By adding flexbox styling you can get the result you wish.
body{
background-color: #e0e0e0;
}
#banner{
background-color: #404040;
height: 7em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
display: flex;
padding: 5px;
}
#bannerimg{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container{
background-color: #e0e0e0;
display: flex;
margin-left: auto;
margin-right: auto;
border-radius: 1em;
align-items: center;
}
.list{
padding: 1.1em;
font-size: 1.2em;
color: #067411;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
</div>
</header>
I'd like to center three boxes like this: https://drive.google.com/file/d/0B4gPO2Q50KsZcGxrbGEySFV5eU0/view?usp=sharing
What I want to achieve is to show the boxes one over the another in mobile devices but I do not know how to do so.
I am using this code:
div#alex_box {
border: solid 1px #aaa;
overflow: hidden;
}
div.img_home {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img_home img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img_home a:hover img {
border: 1px solid #0000ff;
}
div.img_desc_home {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
<div id="alex_box">
<div class="img_home">
<a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/depositphotos_18467679-Travel-car-illustration.jpg" alt="primera imagen"></a>
<div class="img_desc_home">Texto primera imagen</div>
</div>
<div class="img_home">
<a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/images.jpg" alt="segunda imagen"></a>
<div class="img_desc_home">Texto segunda imagen</div>
</div>
<div class="img_home">
<a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/bus-icon120413.png" alt="tercera imagen"></a>
<div class="img_desc_home">Texto tercera imagen</div>
</div>
</div>
Try this zoom out and in to see the change Fiddle
#media screen and (max-width: 2000px) and (min-width: 300px){
img {
height:100px;
}
div#alex_box {
border: solid 1px #aaa;
overflow: hidden;
}
div.img_home {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img_home img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img_home a:hover img {
border: 1px solid #0000ff;
}
div.img_desc_home {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
}
<div id="container">
<div id="alex_box">
<div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/depositphotos_18467679-Travel-car-illustration.jpg" alt="primera imagen"></a>
<div class="img_desc_home">Texto primera imagen</div>
</div>
<div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/images.jpg" alt="segunda imagen"></a>
<div class="img_desc_home">Texto segunda imagen</div>
</div>
<div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/bus-icon120413.png" alt="tercera imagen"></a>
<div class="img_desc_home">Texto tercera imagen</div>
</div>
</div>
</div>
You can achieve it using margin-left: auto;margin-right: auto; within your parent div :
div#alex_box {
border: solid 1px #aaa;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding:10px;
display:table;
}
I also added display:table; to the parent div and display:table-cell; for each child div, and it works fine and it's responsive too.
This is the working Fiddle.
EDIT:
To separate boxes with spaces you just need to add margin:5px; to their CSS: Take a look at this Fiddle.