Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
how do I move my elements to a specific position please? I would like the same layout as this site and for that I used flexbox, except that the elements are not positioned in the same way as the model: https://hermesbot.app/
The text, the logo, the footer, and the icons don't move to the right place
Of course it must remain responsive so I don't know how to do it but I'm trying to use % to make it responsive, is it a good idea ?
I attach my code so you can answer my questions. Thanks in advance.
If you see any other concerns I'd love to hear them, as this is a rather complex project for me
h1 {
display: inline-flex;
flex-direction: column;
}
h1 span {
color: #f5f5f5;
}
.highlight {
background-color: #f5f5f5;
color: #221616;
}
body {
background: #26372b;
background: linear-gradient(315deg,#1c271f,#221616);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.icon {
width: 48px;
height: 48px;
}
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
body h1 {
color: #f5f5f5;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
font-size: 2.488rem;
font-weight: 700;
font-family: 'Poppins', sans-serif;
font-size: 40px;
}
.image_container {
display: flex;
justify-content: center;
align-items: center;
}
#logo {
position: relative;
left: -32px;
max-width: 450px;
border: 1px solid #fff;
}
footer {
display: flex;
justify-content: center;
color: #f5f5f5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#700&display=swap" rel="stylesheet">
<title>Poseidon — The Perfect Discord Bot</title>
<meta name="title" content="Poseidon — The Perfect Discord Bot">
<meta name="description"
content="Poseidon is intended for users who do not want to bother to have 20 bots on their server, simplify your life today by inviting it on your server!">
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Poseidon — The Perfect Discord Bot">
<meta property="og:description"
content="Poseidon is intended for users who do not want to bother to have 20 bots on their server, simplify your life today by inviting it on your server!">
<meta property="og:image"
content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Poseidon — The Perfect Discord Bot">
<meta property="twitter:description"
content="Poseidon is intended for users who do not want to bother to have 20 bots on their server, simplify your life today by inviting it on your server!">
<meta property="twitter:image"
content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
</head>
<body>
<div class="container">
<div class="branding">
<h1>
<span>The future of</span>
<span class="highlight">your discord bot</span>
<span>is on the way !</span>
</h1>
</div>
</div>
<ul>
<li>
<a href="https://twitter.com/PoseidonBotApp"> <img class="icon" src="img/twitter.svg"
alt="Twitter Logo"></a>
</li>
<li>
<img class="icon" src="img/discord.svg" alt="Discord Logo">
</li>
<li>
<img class="icon" src="img/github.svg" alt="Github Logo">
</li>
</ul>
<div class="image_container">
<img id="logo" src="img/logo.png" href="index.html">
</div>
<footer>
© Copyright Centaure-Studio Made with love by
Antyss77
</footer>
</div>
</body>
</html>
body can also be a flexbox and .container be centering itself on both axis via margin:auto;:
/* update to code ================== */
body {
display: flex;
flex-direction: column;
margin: 0;
/* reset */
}
.container {
margin: auto;
flex-wrap: wrap;
max-width: 100%;
}
#logo {
/* see me if no src avalaible */
height: 100px;
width: 100px;
background: gray;
/* end demo css */
/* position and coodonate not needed , margin can be used */
margin:auto 1em;
}
/* end update ====================== */
h1 {
display: inline-flex;
flex-direction: column;
margin:0;
}
h1 span {
color: #f5f5f5;
}
.highlight {
background-color: #f5f5f5;
color: #221616;
}
body {
background: #26372b;
background: linear-gradient(315deg, #1c271f, #221616);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
width: 100vw;
/*height: 100vh;
overflow: hidden;*/
/* not sure these are needed */
}
.icon {
width: 48px;
height: 48px;
}
ul {
list-style-type: none;
display: flex;
align-items: center;
padding:0
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
body h1 {
color: #f5f5f5;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
font-size: 2.488rem;
font-weight: 700;
font-family: 'Poppins', sans-serif;
font-size: 40px;
}
.image_container {
display: flex;
justify-content: center;
align-items: center;
}
#logo {
max-width: 450px;
border: 1px solid #fff;
}
footer {
display: flex;
justify-content: center;
color: #f5f5f5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#700&display=swap" rel="stylesheet">
<title>Poseidon — The Perfect Discord Bot</title>
<meta name="title" content="Poseidon — The Perfect Discord Bot">
<meta name="description" content="Poseidon is intended for users who do not want to bother to have 20 bots on their server, simplify your life today by inviting it on your server!">
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Poseidon — The Perfect Discord Bot">
<meta property="og:description" content="Poseidon is intended for users who do not want to bother to have 20 bots on their server, simplify your life today by inviting it on your server!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Poseidon — The Perfect Discord Bot">
<meta property="twitter:description" content="Poseidon is intended for users who do not want to bother to have 20 bots on their server, simplify your life today by inviting it on your server!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
</head>
<body>
<div class="container">
<div class="branding">
<h1>
<span>The future of</span>
<span class="highlight">your discord bot</span>
<span>is on the way !</span>
</h1>
<ul>
<li>
<img class="icon" src="img/twitter.svg" alt="Twitter Logo">
</li>
<li>
<img class="icon" src="img/discord.svg" alt="Discord Logo">
</li>
<li>
<img class="icon" src="img/github.svg" alt="Github Logo">
</li>
</ul>
</div>
<div class="image_container">
<img id="logo" src="img/logo.png" href="index.html">
</div>
</div>
<ul>
<li>
<img class="icon" src="img/twitter.svg" alt="Twitter Logo">
</li>
<li>
<img class="icon" src="img/discord.svg" alt="Discord Logo">
</li>
<li>
<img class="icon" src="img/github.svg" alt="Github Logo">
</li>
</ul>
<footer>
© Copyright Centaure-Studio Made with love by
Antyss77
</footer>
</div>
</body>
</html>
Related
I know this is an amateur question but I am absolutely lost. I am only just starting out my website and I am looking to add a small space between the two logos on the right. I have been trying for about 2 hours and can't find anything. This is the HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="ie-edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./Style.css">
<title>Joshua's Portfolio</title>
</head>
<body>
<header>
<div class="logo-container">
<img src="./Images/photoroom.png" alt="Image not found" width="60px" height="40px">
</div>
<nav>
<ul class ="navbar-links">
<li><a class="navbar-link" href="$">HOME</a></li>
<li><a class="navbar-link" href="$">PROJECTS</a></li>
<li><a class="navbar-link" href="$">ABOUT</a></li>
</ul>
</nav>
<div class="socials">
<img src="./Images/linkedin-original.svg" alt="Image not found" width="30px" height="55px">
<img src="./Images/github-original.svg" alt="Image not found" width="30px" height="55px">
</div>
</header>
</body>
</html>
This is the CSS -
* {
margin: 0px;
padding: 0px;
box-sizing: border-box
}
body {
font-family: 'Raleway', sans-serif;
background-color: #c8b69a;
}
header {
display: flex;
width: 90%;
margin: auto;
background-color: #814E10;
align-items: center;
}
.logo-container, .navbar-links, .socials {
display: flex;
}
.logo-container {
flex: 1;
}
nav {
flex: 2;
}
.navbar-links {
justify-content: space-around;
list-style: none;
}
.navbar-link {
text-decoration: none;
}
.socials {
flex: 1;
justify-content: flex-end;
margin-right: 13px;
}
If anyone has any suggestions it would be much appreciated, thanks!
All you need to do to define which element you want to add margin to:
.socials img:first-child {
margin-right: 13px;
}
By this, you can say that in class .socials the first element of img will have margin-right equal to 13px.
Ok I feel you one this, having gone through learning CSS its a pain, you dont want to target the social class because that is the parent of the img's. ( imagine there's a box wrapping the 2 imgs )
What you want to target is ... (.socials img {} )
this will target the individual img tags and from there you want to add a margin-left of 13px.
You dont want to do margin-right because that will push the both imgs 13px to the left of the navbar, making it uneven
.socials img {
margin-left:13px
}
I have started trying to code my first website after learning for about 2 days.. and have run into some problems (inevitably):
When viewing the page from a phone, everything gets moved way out of position
I can see the home screen absolutely fine on the live server but after importing the files to host the website, the background isn't coming up
When zooming in/out of the page elements move around
Any help or advice would be appreciated, thank you in advance!
The website in question where I have uploaded the home page is: http://btbco.co.uk/
What I've coded in the index.html and styles.css files (in Visual Studio Code) is copied below:
(Please bare in mind I am very much as beginner as you can get and my terminology and knowledge will be very limited)
html {
margin: 0;
padding: 0;
height: 100%;
}
img.logo {
max-width: 31rem;
position: absolute;
left: 85rem;
margin: 0 auto;
}
h1.hometitle {
color: rgba(255, 0, 0, 0);
}
footer {
color: white;
position: absolute;
bottom: 0%;
width: 99%;
text-align: center;
background: black;
margin: 0 auto;
}
ul.home-list {
list-style: none;
position: absolute;
top: 21rem;
left: 88rem;
color: white;
width: 25rem;
}
li.homenav {
color: #ffbd59;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: #000000;
background-color: black;
border: groove;
padding-top: 0.1px;
max-width: 25rem;
position: static;
}
body {
background-image: url(/Images/Home\ page.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/Images/Browser logo.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0," />
<meta
name="keywords"
content="burgers, beef burgers, halal, halal burgers, food, halal food"
/>
<meta
name="description"
content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties."
/>
<link rel="stylesheet" href="styles.css">
<title>Bun The Burger | The new home of fresh juicy beef burgers</title>
</head>
<div class="logo">
</div>
<h1 class="hometitle">
<em>Bun The Burger ©</em>
</h1>
<!-- Logo-->
<a href="http://buntheburger.co.uk">
<img class="logo" src="images/LOGO.png" alt="Bun The Burgers Logo" />
</a>
<!--Navigation Menu-->
<div class="Navigation"> <nav>
<ul class="home-list">
<li class="homenav">Menu</li>
<li class="homenav">Order</li>
<li class="homenav">About Us</li>
<li class="homenav">Testimonials</li>
<li class="homenav">Contact Us</li>
</nav>
</div>
<!--Footer-->
<footer>
<p> 2022 Bun The Burger © – All Rights Reserved</p>
<p> Home • Menu • Order • About Us • Contact Us • Privacy Policy • Terms and Conditions</p>
</footer>
</body>
</html>
I adjusted your background-positioning and also, the biggest thing I would suggest when trying to make your site responsive is to stay away from absolute positioning as much as possible. For example, on your ul and logo you have left: 88rem. 88rem is going to be different on all media devices so on mobile devices (smaller screens) it will be completely out of the screen and will cause overflow on the x-axis. I removed that absolute positioning and added a container so that I could use a flexbox on your content. Your content is now responsive without any x-axis overflow. I also adjusted your footer so it was 100 % width of all devices.
Also, you had a few errors which will cause semantic issues later on. You don't have an opening body tag and you forgot to close your unordered list ul. Be sure to avoid these errors as much as possible in the future, cause they won't accurately affect the live front-end if they are present, which could cause CSS that is unnecessary. This should get you started on a responsive build, however.
Also, I suggest using a good IDE editor that formats your code properly, so these semantic errors can be greatly reduced. For a beginner, I would recommend VS code.
html {
margin: 0;
padding: 0;
height: 100%;
}
img.logo {
max-width: 31rem;
position: absolute;
right: 0;
margin: 0 auto;
}
h1.hometitle {
color: rgba(255, 0, 0, 0);
}
footer {
color: white;
position: absolute;
bottom: 0%;
width: 100vw;
text-align: center;
background: black;
margin: 0 auto;
}
ul.home-list {
list-style: none;
position: relative;
color: white;
width: 25rem;
}
li.homenav {
color: #ffbd59;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: #000000;
background-color: black;
border: groove;
padding-top: 0.1px;
position: static;
}
body {
background-image: url('https://dummyimage.com/1000/507c8c/fff');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
overflow-y: hidden;
}
.container {
display: flex;
justify-content: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/Images/Browser logo.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0," />
<meta name="keywords" content="burgers, beef burgers, halal, halal burgers, food, halal food" />
<meta name="description" content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties." />
<link rel="stylesheet" href="styles.css">
<title>Bun The Burger | The new home of fresh juicy beef burgers</title>
</head>
<body>
<div class="container">
<div class="logo">
<!-- Logo-->
<a href="http://buntheburger.co.uk">
<img class="logo" src="images/LOGO.png" alt="Bun The Burgers Logo" />
</a>
<!--Navigation Menu-->
<div class="Navigation">
<nav>
<ul class="home-list">
<a href="http://menu.buntheburger.co.uk">
<li class="homenav">Menu</li>
</a>
<a href="http://order.buntheburger.co.uk">
<li class="homenav">Order</li>
</a>
<a href="http://aboutus.buntheburger.co.uk">
<li class="homenav">About Us</li>
</a>
<a href="http://testimonials.buntheburger.co.uk">
<li class="homenav">Testimonials</li>
</a>
<a href="http://contactus.buntheburger.co.uk">
<li class="homenav">Contact Us</li>
</a>
</ul>
</nav>
</div>
</div>
<h1 class="hometitle">
<em>Bun The Burger ©</em>
</h1>
</div>
<!--Footer-->
<footer>
<p> 2022 Bun The Burger © – All Rights Reserved</p>
<p> Home • Menu • Order • About Us • Contact Us • Privacy Policy • Terms and Conditions</p>
</footer>
</body>
</html>
Find the image here to understand what i'm talking about
Been googling and fiddling around but I can't seem to seperate the words. The only separation I managed was using "justify-content: space-around".
Here's the HTML. And the CSS is below it
body {
background-color: #3269a8;
}
.header-container {
display: flex;
width: 100%;
height: 50px;
background-color: #282828;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.logo {
color: white;
font-family: 'Titillium Web', sans-serif;
font-size: 25px;
}
.logo:hover p {
transition: 2000ms;
font-size: 30px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Top 3 Anime</title>
</head>
<body>
<div class="header-container">
<p class="logo-the logo">The</p> <p class="logo-big logo">Big</p> <p class="logo-three logo">Three</p>
</div>
<div class="top3">
<div class="onepiece">One Piece</div>
<div class="dragonball">Dragon Ball Z</div>
<div class="naruto">Naruto</div>
</div>
</body>
</html>
You have used display:flex in your header-container with justify-content:center; that will make the child p tags to be in a line without any space. if you just want little space around p tags you can add
.header-container p {
padding: 0 5px;
}
and if you want to learn about flex and its properties you can learn from here csstricks , the have explained it beautifully.
I hope this will work for you
Thanks
You can change the <p>Your header</p> to <pre>Your Header</pre>. Here <pre> keeps the format of the text including spaces. You can check this page: https://www.w3schools.com/tags/tag_pre.asp
Basically you just need to editted the following in your code:
<pre class="logo-the logo">The </pre> <pre class="logo-big logo">Big </pre> <p class="logo-three logo">Three</p>
I added a space after "The" and "Big" so converted them to <pre>.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Center image using text-align center?
(28 answers)
Closed 1 year ago.
I am trying to make a responsive grid that has 3 columns and 3 rows, on the first row there is an image there is supposed to be at the center, just like the title and the text but I can´t find a way to do it, I have tried everything, all of the alignment terms (justify, align, self, items, content) and nothing works.
Is there a way to do it?
body {
margin: 0;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
grid-template-rows: 60vh 60vh 60vh;
row-gap: 80px;
column-gap: 10px;
grid-template-areas:"foto1 foto2 foto3"
"titulo 1 titulo2 titulo3"
"texto1 texto2 texto3";
justify-content: center;
align-content: center;
}
#Titulo_firstF, #TitleSecondF, #TitleThirdF {
text-align: center;
font-family: Montserrat;
font-weight: 500;
font-size: 12pt;
width: 100%;
}
#TextFirstF, #TextSecondF, #TextThirdF {
text-align: center;
font-family: MontSerrat;
color: black;
font-weight: 300;
font-size: 12pt;
width: 100%;
}
#foto1f img{
grid-area: foto1;
width: 20%;
}
#foto2f{
grid-area: foto2;
width: 19%;
}
#foto3f{
grid-area: foto3;
width: 19%;
}
#Titulo_firstF {
grid-area: titulo1;
}
#TitleSecondF {
grid-area: titulo2;
}
#TitleThirdF {
grid-area: titulo3;
}
#TextFirstF {
grid-area: texto1;
}
#TextSecondF {
grid-area: texto2;
}
#TextThirdF {
grid-area: texto3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style teste.css">
<title>Document</title>
</head>
<body>
<div class= features>
<div class= first_feature>
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png" class="fotos" id="foto1f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id = "Titulo_firstF">
GET A CUSTOMIZED<BR/>
E-MAIL ADRESS AND MORE
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id = "TextFirstF">
Looking cautiously round, to <br/>
ascertain that they were not <br/>
overheard, the two hags cowered <br/>
nearer to the fire, and chuckled <br/>
heartily.
</p>
</div>
<div class= second_feature>
<img src="https://www.imagemhost.com.br/images/2021/06/13/edit.png" class="fotos" id="foto2f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id= TitleSecondF>
40 MILLION HIGH </br>
QUALITY IMAGES
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id= TextSecondF>
At first, for some time, I was not able to </br>
answer him one word; but as he had </br>
taken me in his arms I held fast by him, </br>
or I should have fallen to the ground. </br>
</p>
</div>
<div class = third_feature>
<img src = "https://www.imagemhost.com.br/images/2021/06/13/card.png" class="fotos" id="foto3f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id= "TitleThirdF">
CREATE A SIMPLE LOGO
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id= TextThirdF>
She gave my mother such a turn, </br>
that I have always been convinced I </br>
am indebted to Miss Betsey for </br>
having been born on a Friday. </br>
</p>
</div>
</div>
</div>
</body>
</html>
It is supposed to look like this:
It is supposed to look like this:
you can use this way. Put a img in div tag and use text-aling: center. There are many ways you can do this.
.fotos-block{
text-align: center;
}
<div class="fotos-block">
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png" class="fotos" id="foto1f">
</div>
And you can also use this way to center the img.
.fotos{
display: block;
margin: auto;
text-align: center;
}
I'm making a very simple web page but i need help positioning it in the center. How would I go about vertically and horizontally centering this? I have tried several other posts on here but none seem to work so it would be great if some could help me based on my specific code.
I provided the HTML below:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>
example — example & example
</title>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
font-family: 'Dosis';
}
</style>
</head>
<body>
<div style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br>
USA
<br><br>
example & example
<br>
coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
</html>
just try that
body > div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Give a class name to your main div and use position absolute.
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<head>
<meta charset="utf-8">
<title>
example — example & example
</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
font-family: 'Dosis';
}
</style>
</head>
<body>
<div class="content" style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br> USA
<br><br> example & example
<br> coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
To horizontally center a block element (like ), use margin: auto;
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
<head>
<meta charset="utf-8">
<title>
example — example & example
</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
font-family: 'Dosis';
}
</style>
</head>
<body>
<div class="center" style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br> USA
<br><br> example & example
<br> coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
css
.outer-box {
height: 100vh;
dispaly: flex;
width: 100%;
justify-content: space-around;
}
.inner-box {
display: block;
position : relative;
width: auto;
}
html
<div class="outer-box">
<div class="inner-box" style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br> USA
<br><br> example & example
<br> coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
</div>
Consider using flexbox to control your centering.
<body>
<div class="content">
example.IO
<br>
USA
<br><br>
example & example
<br>
coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
</body>
and then css that ties to the .content class name referenced in the HTML above:
body {
min-height: 100vh;
margin: 0;
}
.content {
text-align: center;
font-size:16px;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}