I'm playing around with html and css and have a question about the text-align functions.
I'm trying to build my own website and want the text-align set to start, but centred in the middle of the page. I've got it so that the content is centred, but when only text-align is set to centre. Is there a way to obtain centred text content but with text-align set to start? I don't particularly want to use padding (if it can be helped), as i've used it within this context and have had some responsive problems (which have had to be rectified with many media screen commands).
Sorry for the pretty noobie question.
HTML
.Container1 {
height: 100%;
width: 100%;
background: #e8eaed;
background-size: cover;
display: table;
margin: auto;
display: table;
top: 0;
}
.About {
font-family: 'Lato';
font-weight: 300;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
max-width: none;
}
.Content2 {
margin: 0 auto;
text-align: center;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
text-align: center;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
This is how i want the text to be aligned, but to be centred in the middle of the page...
Try to use Flexbox. Use align-item:center to center flex item vertically.
Stack Snippet
.Container1 {
height: 400px;
background: #e8eaed;
display: flex;
align-items: center;
}
.About {
font-family: 'Lato';
font-weight: 300;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
fixed the width and then set margin: 0 auto
Related
I have a relative element within which there is an element with an image background that is absolute, when the parent of the relative element becomes a flex-box I lose the width, only when I bring the relative element static width (width: num px), I do not lose the width but the image does not responsive.
/* -------------------------------- */
/* header */
header {
margin-bottom: 24px;
display:flex;
}
.header-items h1 {
font-weight: 900;
font-size: 48px;
text-transform: uppercase;
line-height: 48px;
margin-bottom: 32px;
}
.header-items p {
margin-bottom: 35px;
font-weight: 500;
}
.pre--order {
display: flex;
align-items: baseline;
margin-bottom: 64px;
}
.pre--order a {
padding: 16px 26px;
background-color: #f16718;
text-transform: uppercase;
border-radius: 8px;
color: #ffffff;
margin-right: 32px;
}
.pre--order p {
font-weight: 700;
text-transform: uppercase;
}
.keyboard--header {
position: relative;
overflow: hidden;
max-width: 100%;
height: 425px;
}
.kh--image {
background-image: url("https://www.beauchamp.com/_wp/wp-content/uploads/2020/12/xIsrael_TelAviv_City_shai-pal1.jpg");
background-repeat: unset;
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 15px;
top: 0;
left: 24px;
}
<header>
<div class="container">
<section class="header-items">
<h1>Typemaster Keyboard</h1>
<p>
Improve your productivity and gaming without breaking the bank.
Upgrade to a high quality mechanical typing experience.
</p>
<div class="pre--order">
Pre-order now
<p>Release on 5/27</p>
</div>
</div>
</section>
<section>
<div class="keyboard--header">
<div class="kh--image"></div>
</div>
</section>
Here is an example where I've wrapped the flexbox, given the flex child an explicit width&height, and fixed up a bunch of things like margin/padding you should generally base off typography not px
header {
margin-bottom: 1.5em;
display: flex;
flex-flow: row wrap;
}
.header-items h1 {
font-weight: 900;
font-size: 3rem;
text-transform: uppercase;
line-height: 3rem;
margin-bottom: 2rem;
}
.header-items p {
margin-bottom: 2rem;
font-weight: 500;
}
.pre--order {
display: flex;
align-items: baseline;
}
.pre--order a {
padding: 1em 1.5em;
background-color: #f16718;
text-transform: uppercase;
border-radius: 8px;
color: #fff;
margin-right: 2em;
}
.pre--order p {
font-weight: 700;
text-transform: uppercase;
}
.keyboard--header {
width: 100%;
height: 200px;
}
.kh--image {
background-image: url("https://www.beauchamp.com/_wp/wp-content/uploads/2020/12/xIsrael_TelAviv_City_shai-pal1.jpg");
background-clip: cover;
background-size: 100%;
width: 100%;
height: 100%;
border-radius: 15px;
}
<header>
<div class="container">
<section class="header-items">
<h1>Typemaster Keyboard</h1>
<p>
Improve your productivity and gaming without breaking the bank. Upgrade to a high quality mechanical typing experience.
</p>
<div class="pre--order">
Pre-order now
<p>Release on 5/27</p>
</div>
</section>
</div>
<div class="keyboard--header">
<div class="kh--image"></div>
</div>
</header>
I want to reduce vertical size between <p> elements
So I have a fiddle for testing purposes
As you can see the space between paragraph elements is too much, I try using line-height: 0, but it does not make any effect, anyone has an idea why I can not reduce the vertical space between those elements?
HTML:
<div class="container">
<div class="container__overlay-item">
<img class="logo" src="https://logo.clearbit.com/facebook.com">
</div>
<div class="container__overlay">
<div>
<p class="title">Title Test</p>
<p class="subtitle">This is a title test</p>
</div>
</div>
</div>
SCSS:
.container {
width: 100%;
border:1px solid black;
margin-top: 5em;
display:flex;
flex-flow:row;
justify-items: flex-end;
margin-right: initial;
&__overlay {
flex: 1 0 auto;
grid-template-columns: auto auto;
background-color: #48525D;
border-radius: 129.5px 0px 0px 129.5px;
padding: 4% 4%;
max-width: 1200px;
&-item {
display: flex;
align-items: center;
justify-content: left;
}
}
}
.logo {
max-height: 100px;
flex: 0 1 auto;
}
.title {
color: #ffffff;
font-weight: normal;
line-height: 1.2;
font-family: "Exo 2", sans-serif;
letter-spacing: 0;
font-size: 4rem;
text-align: left;
}
.subtitle {
color: #ffffff;
line-height: 1.4;
font-family: "Exo 2", sans-serif;
letter-spacing: 0;
font-size: 5rem;
text-align: left;
font-weight: bold;
}
.label {
font-family: "Exo 2", sans-serif;
color: #A60A2D;
text-align: left;
font-size: 3.8rem;
font-weight: bold;
}
Using Chrome's DevTools you can see in your JSFiddle that the p.title has margin-bottom: 16px. For starters, you can remove that to bring the title and subtitle a bit closer together.
From there, you can make the line-height (and font-size if necessary) of the .title and .subtitle smaller and adjust to whatever looks right to you.
The changes could look like this:
.title {
...,
margin-bottom: 0px;
font-size: 3rem;
line-height: 3.5rem; // Or whatever height you want
}
.subtitle {
...,
font-size: 4rem;
line-height: 4.5rem; // Or whatever height you want
}
Try and use developer tools to inspect your elements. If you inspect the first paragraph .title you will see that it has a bottom margin which every <p> element has by default. You can just add .title{margin-bottom:0;} and the space will be reduced. If you want to use line-height you can add something like .subtite{line-height:0.5;} and it will be reduced further.
I am trying to get 2 div tags to be inline with each other. When I did use display: inline-block it doesn't format correctly.
What I am trying to achieve see image
Code:
.packaging_details {
display: block;
border: solid 1px #000;
padding: 10px;
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.heading_texts {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
text-align: center;
display:inline-block;
}
.Subheading2 {
text-align: center;
font-size: 14px;
text-transform: uppercase;
}
.Subheading1 {
font-weight: bold;
text-transform: uppercase;
text-align: right;
display:inline-block;
}
<div class="packaging_details">
<div class="heading_texts">Company Name</div>
<div class="Subheading1">LABEL</div>
<div class="Subheading2">
<span class="logids">Name:</span> ###
</div>
</div>
It is always good to wrap parts that are supposed to look differently into seperat containers so you can position them differently. Your Problem here is most likely, that "heading_texts", "Subheading1" and "Subheading2" are on the same Layer / in the same position so they will behave similar in the parent Container.
I can offer you one solution: CSS Flex.
The code for that:
.packaging_details {
display: block;
border: solid 1px #000;
padding: 10px;
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.heading_texts {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
text-align: end;
width: 55%;
}
.Subheading2 {
text-align: center;
font-size: 14px;
text-transform: uppercase;
}
.Subheading1 {
font-weight: bold;
text-transform: uppercase;
text-align: end;
width: 45%;
}
.inline-container{
display: flex;
flex-direction: row;
text-align: center;
justify-content: center;
}
<div class="packaging_details">
<div class="inline-container">
<div class="heading_texts">Company Name</div>
<div class="Subheading1">LABEL</div>
</div>
<div class="Subheading2">
<span class="logids">Name:</span> ###
</div>
</div>
The Only thing you have to be aware of, is that you position the content of the Line by defining the widths of the 2 containers here, so if you want the logo to be more centered you need to play around with the with of both containers, they always need to sum up to 100% width!
You can use flex box as below.
The only challenge by doing it this way is to center align the Subheading2 below heading_text, one way is to set flex-basis 100% of the box width - the width of the Subheading1 element.
This solution is for the case when you don't have access or not able to change html structure but if you can change the html structure that can be easily styled with flex-box.
.packaging_details {
display: flex;
flex-wrap: wrap;
border: solid 1px #000;
padding: 10px;
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.heading_texts {
flex: 1;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
text-align: center;
}
.Subheading2 {
flex-basis: calc(100% - 55px);
text-align: center;
font-size: 14px;
text-transform: uppercase;
}
.Subheading1 {
font-weight: bold;
text-transform: uppercase;
text-align: right;
}
<div class="packaging_details">
<div class="heading_texts">Company Name</div>
<div class="Subheading1">LABEL</div>
<div class="Subheading2">
<span class="logids">Name:</span> ###
</div>
</div>
I am creating a link that looks like a button. One thing I am running into is if I have more than one word for the anchor the link/button text is going to the next line. It is fine if the anchor text goes to the next line, but the border then does not wrap around the entire thing. It looks as if the border breaks (not sure of the correct terminology).
See the image below for a reference: (Sorry image upload keeps failing)
Does anyone know how I can
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
You just need to set display: block to your .mainLink
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
display: block;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
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>