I was trying to have fun by making a joke with some friends and i ended up getting stuck when a button i my website wasn't aligned in the center of the page.
Where is my HTML code:
<body>
<?php include 'navbar.php'; ?>
<br><br>
<div class="content">
<h1> Roderick15's Stuff</h1>
<br><br>
<br><br>
<button onclick="window.location.href='deathnote.php'"
class="btn">Death Note</button>
</body>
And where's my css code:
body {
margin: 0 auto;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
color: white;
text-align: center;
font-size: 15px;
opacity: 1;
transition-duration: 0.3s;
background-color: black;
cursor: pointer;
display: block;
float: left;
margin-right: 5px;
line-height: 50px;
}
.btn:hover {
opacity: 0.5;
color : white;
}
h1{
text-align: center;
}
I hope someone can help me getting rid of this problem.
you should remove the float left
and change the margin to "0 auto" if you want to center the button
.btn {
color: white;
text-align: center;
font-size: 15px;
opacity: 1;
transition-duration: 0.3s;
background-color: black;
cursor: pointer;
display: block;
margin: 0 auto;
line-height: 50px;
}
To be able to center an element horizontally you can use "margin: auto"
This requires the object to have a certain width, (for example "width: 150px;")
In your example, you use "float left", which causes the element to stick to the left of the screen in this case.
Removing "float: left;" and "margin-right: 5px;"
and adding
"width: 150px;"
"margin: auto;"
Should do the trick.
So that the .btn class looks like this;
.btn {
color: white;
text-align: center;
font-size: 15px;
opacity: 1;
transition-duration: 0.3s;
background-color: black;
cursor: pointer;
display: block;
line-height: 50px;
width: 150px;
margin: auto;
}
I recommend W3 schools if you need any more info.
https://www.w3schools.com/css/default.asp
Related
I've been through some CSS practice lately. Let's say I have the following HTML/CSS code of a calendar web app you can see in my Codepen.
What I need is to have the ".day_body" element and the "+" pseudo element along with its white circle container horizontally aligned. Furthermore, I need that "+" to fit in the centre of the white circle. Unfortunately editing the HTML or using flexbox is not an option for now.
Any ideas on how to accomplish that?
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
}
.day_add {
margin-left: 20px;
float: left;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
Like already mentioned in the comment, adding text-align: center; to .day-add helps to align the plus sign.
To horizontally align the the date with the circle, you could increase the line-height of the .day_body to the half of the line-height of the circle (4em): line-height: 2em;. Nevertheless this moves the date a little bit 'down'. Is that fine?
Alternatively you could use absolute positioning of the circle.
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
line-height: 2em;
}
.day_add {
margin-left: 20px;
float: left;
text-align: center;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
I am trying to put a button under a heading, but the button is being pushed to the side. I assume it has to do with absolute position or something, but I am not too sure. I also want to make the button responsive like the text, so that the size of the button changes in different windows.
HTML:
body{
font-family: sans-serif;
margin:0px;
}
.splash{
background-color: #faead3;
height: fill;
padding: 0;
margin:0;
display: flex;
justify-content: left; /* align horizontal */
align-items: center; /* align vertical */
height: 100vh;
}
.splash h1{
margin:0px;
font-size: 4.5vw;
color: #08aabe;
margin-left: 2.5em;
padding-bottom: 3.5em;
}
.button {
background-color: #08aabe;
border: none;
color: #faead3;
padding: 1em 2em;
text-align: center;
text-decoration: none;
font-size: 1w;
}
<div class="splash">
<h1>Random Text.</h1>
<a class="button"href="#">Button Link</a>
</div>
https://codepen.io/anon/pen/qQraNB
Any help is appreciated, thanks!
You use display:flex whats make them be in same line so:
1.Remove display:flex from .splash
2.font-size: 1w; in .button {} is invalid change it to font-size: 2.5vw;
you can use margin-left: 4.5em; to button
See code in fiddle:
body{
font-family: sans-serif;
margin:0px;
}
.splash{
background-color: #faead3;
height: fill;
padding: 0;
margin:0;
height: 100vh;
}
.splash h1{
margin:0px;
font-size: 4.5vw;
color: #08aabe;
margin-left: 2.5em;
padding-bottom: 3.5em;
}
.button {
background-color: #08aabe;
border: none;
color: #faead3;
padding: 1em 2em;
text-decoration: none;
font-size: 2.5vw;
margin-left: 4.5em;
}
<div class="splash">
<h1>Random Text.</h1>
<a class="button"href="#">Button Link</a>
</div>
There's a padding-bottom: 3.5em; set on the heading title, which is pushing the heading up, if you take that the padding bottom off, the button should align the same vertically on both of them.
When i don't insert md-button everything works perfectly. But when I add md-button, span doesn't work properly. The number "5" goes down. How can I solve this problem?
HTML:
<button md-button class="special-orders">xüsusi təkliflər <span>5</span></button>
CSS:
.special-orders {
font-size: 15px;
color: white;
span {
font-size: 11px;
display:inline-block;
width: 15px;
height: 15px;
text-align: center;
color: #FF2868;
background-color: white;
border-radius: 50%;
vertical-align: middle;
padding: 0;
}
}
The material styling sets the line-height on the button to 36px which seems to be causing the problem with the span having a fixed height and width. Setting the line height on the span as well is easier than trying to line everything up.
.special-orders {
font-size: 15px;
color: white;
span {
line-height: 18px;
width: 18px;
display:inline-block;
text-align: center;
color: #FF2868;
background-color: white;
border-radius: 50%;
vertical-align: middle;
padding: 0;
}
}
I'm trying to have a div float to the right however when applying float:right and making the page size smaller with the browser the div goes under the previous div.
https://jsfiddle.net/Crystalwolf/bku2f08c/1/
HTML
<div id="container">
<div id="navbar-container">
<div id="mainlogo">
</div>
<div id="sublogo">
This is a subtitle test
</div>
<div id="navbutton-container">
<div class="navbutton navcurrent">
Home
</div>
<div class="navbutton">
About
</div>
<div class="navbutton">
Web Design
</div>
<div class="navbutton">
Programming
</div>
<div class="navbutton">
Graphic Design
</div>
<div class="navbutton">
Contact
</div>
</div>
</div>
<div id="carousel">
</div>
</div>
CSS
#container {
width: 100%;
height: 100%;
}
#navbar-container {
position: fixed;
background-color: white;
width: 100%;
height: 100px;
padding: 15px;
color: white;
padding-left: 60px;
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
min-width: 1200px;
overflow: hidden;
white-space: nowrap;
}
#mainlogo {
color: #373c40;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
position: relative;
float: left;
display: inline-block;
padding-left:50px;
}
#sublogo {
color: #373c40;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
position: relative;
float: left;
padding: 25px;
display: inline-block;
}
#carousel {
background-image: url("http://3nacu.com/unique/images/stars.png");
width: 100%;
height: 500px;
}
#navbutton-container {
margin-top: 10px;
background-color: white;
height: 50px;
padding-left: 50px;
float: right; //THIS SPECIFIC FLOAT RIGHT
display: inline-block;
padding-right:50px;
}
.navbutton {
display: inline-block;
vertical-align: top;
height: 50px;
padding: 15px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
color: #373c40;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
cursor: pointer;
text-transform: uppercase;
font-weight: 700;
}
.navbutton:hover {
background-color: #373c40;
color: white;
}
.navcurrent {
background-color: #B39EB5;
color: white;
}
e.g Have the browser at 1920 on the result and it's all on one line. As soon as you make it a considerable amount shorter it proceeds to just go under the previous div instead of just enabling a horizontal scroll bar.
This is expected behavior, floated elements will break if there's not enough room for them inside the container. If you want a scrollable overflow instead, you need to give the container a fixed width (e.g. 1200px instead of 100%) large enough to fit all the floated elements.
I have a button on my website, and I used resolution independent alignment. I checked two different computer screens with different resolutions and it looks alright, however, once opened on a larger aspect ratio screen or a mobile/tablet device it re-positions. On a larger aspect ratio screen the buttons moves to the left, on the smaller devices, it floats towards the right. I'm not 100% certain what could of gone wrong. Below is my CSS and HTML code.
HTML:
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<button>Book Appointment</button>
</div>
CSS:
body {
background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
margin: 0;
padding: 0;
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-left: 33%;
margin-top: 3%;
border-radius: 5px;
}
Any idea how to fix this?
You center a html element, which has the standard position and is a block element with margin-left: auto and margin-right: auto.
It is a convention to write the first letter of classes and ids in lowercase.
Example
Just another way to do it:
I wrap your button in div and center the button using text-align:center
Don't forget to take out margin-left: 33%; in your css
HTML
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<div class="center">
<button>Book Appointment</button>
</div>
</div>
CSS
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.center {
text-align: center;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-top: 3%;
border-radius: 5px;
}
Example: http://codepen.io/anon/pen/EPyjXm
create a new CSS property for a tag and set display to flex(takes up 100% of width; and justify content to center.
EDIT
After checking out your site,
there is a margin-left of 15px coming from somewhere. Get rid of it if that is a possibility or else just add margin-left: 0 to the .Welcome a {...}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
margin-left: 0; /* Add !important in case it is overwritten*/
}
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
border-radius: 5px;
}
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<a href="website_link">
<button>Book Appointment</button>
</a>
</div>