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;
}
Related
I've been trying to get these two divs to display next to each other. I've looked up the many ways to do it. I've display: inline-block, flex-box, CSS grid. None of them seem to be working. I did some research with flex box, but with that, I found a lot of the articles I only listed the parent div and then the child div, with the child div just being used twice to create two div next to each other with the exact same properties. I am trying to display two divs right next to each other, but those two div have divs inside of them as well in order to style individual lines in a blog.
Here is my blog.css stylesheet. I am using the .blog-wrap as the div that is supposed to be on the left. The divs after blog wrap are to style the individual lines in the left div.
#charset "utf-8";
/* CSS Document */
.blog-wrap {
padding: 20px;
text-align: left;
width: 500px;
display:inline-block;
}
#blog-title {
font-size: 18px;
font-weight: 700;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
}
#blog-posted-by-date {
font-size: 12px;
}
#blog-content {
font-size: 14px;
Next, we have the actual page displaying the content. I have the stylesheet typed right into the page since this is the landing page, and I plan on using these styles solely on this page. The .landing_page_main is the parent div and the two divs that are supposed to be next to each other go inside. .landing-main-login-register is the div element that is supposed to be on the right.
<!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" />
<META name="keywords" content="">
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/nav.css" />
<link rel="stylesheet" href="css/blog.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/forms.css" />
<title></title>
</head>
<body>
<style>
.landing_ad_field {
text-align: center;
background-color: #CCC;
max-width: 900px;
height: auto;
margin: auto;
border-radius: 5px;
font-size: 18px;
}
.landing_page_main {
background-color: #CCC;
opacity: 0.5;
width: 900px;
max-width: 900px;
max-height: 500px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
padding: 5px;
box-sizing:border-box;
display: table;
}
.landing-main-login-register {
padding: 5px;
text-align: center;
font-size: 50px;
border: 5px solid #999;
width: 400px;
}
</style>
<center><img src="../images/Official Logo.png" width="300" /></center>
<section class="public_nav_bar">
<div id="public_nav_bar">
Directory ·
Education ·
·
Events ·
Contact Us
</div>
</section>
<section class="landing_ad_field">
Advertisement Placement
</section>
<section class="landing_page_main">
<div class="blog-wrap">
News Area
<?php
include 'db_connect.php';
$sql = "select * from blog";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_array($result)) {
echo '<div id="blog-title">' .$row['title'] .'</div>';
echo '<div id="blog-posted-by-date">Posted By ' .$row['posted_by'] .', ' .date("F j Y g:i:s" , strtotime($row['date'])) .'</div>';
echo '<div id="blog-content">' .$row['content'] .'</div>';
}
?>
</div>
<div class="landing-main-login-register">
✎
Register
<br/>
<hr/>
🔒
Log In
</div>
</section>
<?php require 'master-pages/footer.html' ?>
</body>
</html>
Currently, they are displaying stacked, with the login-register-register div below the blog-wrap.
Any advice would be greatly appreciated.
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
}
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>.
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>
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>