This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 2 years ago.
This is what I want:
https://i.stack.imgur.com/WTTMA.png
This is what I have:
https://i.stack.imgur.com/V7X6m.png
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic">Content</li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
CSS
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
}
img{
width: 200px;
}
I've tried vertical align middle but it didn't do anything then I tried to center it with margins but it
didn't work out as I wanted and I also tried flex and absolute position.
Using a flexbox would be a better solution. Prerequisite is to put "content" inside a separate HTML element. In this case I used a span.
.ul {
/* display: table; */
margin: 0 auto;
list-style: none;
}
.li {
font-weight: bold;
font-size: 50px;
display: flex; /* Added */
align-items: center; /* Added */
}
img {
width: 200px;
}
<header>
</header>
<main>
<ul class="ul">
<li class="li">
<img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" alt="pic">
<span>Content</span></li>
</ul>
</main>
<footer>
</footer>
Try using flex box
.li{
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
}
Use vertical-align: middle:
.selector {
vertical-align: middle
}
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
First of all I would like to welcome you to the Stackoverflow Community.
You can achieve the required result by using flexbox in your CSS. I am putting the same HTML over here, just putting that "content" inside a span.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic"><span>Content</span></li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
Add display:flex; and align-items: center; to your .li selector as shown below.
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
display:flex;
align-items: center;
}
img{
width: 200px;
}
Hoping that my answer is helpful to you.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 10 months ago.
I have tried so many different ways to make h1 and h2 center aligned.
I have managed to make them centered horizontally, not sure why it won't work for vertical alignment. They also move when navbar shows. I really don't know how to fix it.
I tried "display: table-cell; vertical-align: middle;" when i searched some other answers, still did not work.
.bg-title{
color: white;
font-family: 'Bungee Inline', cursive;
font-size: 100pt;
text-align:center;
vertical-align:middle;
}
.secd-title{
color: white;
font-family: 'Candal', sans-serif;
text-align:right;
margin-right: 2.5em;
}
.bg-title-wrap{
display: flex;
flex-direction: column;
position: relative;
justify-items: center;
align-items: center;
}
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- <div class="backGround"></div>-->
<header class="header">
<nav id = "main-menu">
<div class="title-bar-right nav-wrap" data-responsive-toggle="main-nav" data-hide-for="large-dropdown">
<div class="title-bar-title nav-title">Menu</div>
<button class="menu-icon" type="button" data-toggle="main-nav"></button>
</div>
<div class="top-bar" id="main-nav" data-animate="hinge-in-from-top spin-out">
<div class="top-bar-right">
<ul class="vertical large-vertical menu" data-responsive-menu="drilldown large-dropdown">
<li class="home">HOME</li>
<li>BUY CANNABIS</li>
<li>STORES</li>
<li>ABOUT US</li>
<li>CONTACT</li>
<li>SUBSCRIBE</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="bg-title-wrap">
<h1 class="bg-title">store name</h1>
<h2 class="secd-title">CANNABIS CO.</h2>
</div>
</main>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
You need to set the height of the parent div and apply justify-content: center instead of justify-items.
Also, it is good to reset margins to zero 0 to remove unwanted inherited browser styles.
.bg-title{
color: black;
font-family: 'Bungee Inline', cursive;
font-size: 100pt;
text-align:center;
margin: 0;
}
.secd-title{
color: black;
font-family: 'Candal', sans-serif;
margin: 0;
}
.bg-title-wrap{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 350px;
}
<main>
<div class="bg-title-wrap">
<h1 class="bg-title">store name</h1>
<h2 class="secd-title">CANNABIS CO.</h2>
</div>
</main>
I designed this using adobe XD, I am trying to set up a page where I have a picture and a card side by side under a navbar, I've already set up my navbar, but I cant manage to find a helpful answer online as to how I can achieve my goal, any help would be very much appreciated, thank you.
best way to solve this case is using flexbox, here good article to learn about it
first wrap both card and image on the one div with container class
then style the card or image to make it fit like your design
for navbar you can use yours but in my case. position, z-index and inset top is necessary
.navbar {
z-index: 10000;
position: fixed;
top: 0px;
width: 100vw;
background-color: white;
}
.navbar ul {
display: flex;
justify-content: space-between;
list-style-type: none;
}
.menus {
display: flex;
margin-right: 50px;
}
.container {
display: flex;
justify-content: center;
margin-top: 70px;
gap: 20px;
}
.card {
width: 200px;
height: 200px;
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox | Ex</title>
<link rel="stylesheet" href="flexbox.css" />
</head>
<body>
<nav class="navbar">
<ul>
<li>Logo</li>
<ul class="menus">
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</ul>
</nav>
<div class="container">
<div class="card">Card</div>
<img src="http://placekitten.com/g/500/300" alt="banner" />
</div>
</body>
</html>
Theres many ways to achieve this with html/css but the most popular would be using flexBox.
The question is too vague to give a specific answer but i recommend reading up on https://web.dev/learn/css/flexbox/
Header with logo
i want to align home, etc with the logo, but i think the logo is occupying all the space on top of the menu-headers and i dont know how to reduce it, i've already tried the margin-left or right and also padding but it doesnt help.
i also want to know if it is a bad practice to have negative CSS rules or if there is any bad practices in my code so far.
sorry for the bad english, i`m not a native
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="main-header">
<div class="Logo">
<img src="photos/Logo.png.png" alt="Makeup" class="center">
</div>
<div class="social">
</div>
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
</header>
<section>
</section>
</body>
</html>
body{
background-color: #137B77;
margin: 0;
padding: 0;
}
header{
background-color: #45a29e;
margin: 0;
padding:0;
justify-content: baseline;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
margin-bottom: -124px;
margin-top: -65px;
}
.main-header{
margin-top: 0px;
margin-bottom: 62px;
}
.header-menus{
padding-top: 0;
}
.header-menus ul li {
list-style: none;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
Since div elements are block elements, they take all available horizontal space of the parent element, i.e. a complete "line".
See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
I would recommend using display: flex on the .main-header class. By default the child elements will be arranged in a row (flex-direction: row).
The align-items property can be used to arrange the elements vertically.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.main-header {
display: flex;
align-items: center;
}
Demo: https://jsfiddle.net/u3gv6s7f/
Give the logo a width of x px. That will give it a set size. You can do width=100% and make sure you style the container div as a inline-block or use flex-box in order to set its size straight.
.main-header {
display: flex;
}
img {
width: 100%;
}
That should make every element inside the header display on a row.
Look more into flex-box in order to understand it well. https://flexboxfroggy.com/ is a good resource.
You can use flexbox in main div which wraps logo and links
.main-header{
margin-top: 0px;
margin-bottom: 62px;
display: flex;
justify-content: center; //you can do also space-between or space-evenly
align-items: center;
}
this is my index.html
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
display: flexbox;
flex-direction: column;
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
}
nav{
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
</div>
</header>
</body>
</html>
Now, I want them to go side by side . How?
I'm just a beginner so I can't understand much.
It would be good to get the solution with some explanation
thank you.
I was working on VS Code and using Chrome and Microsoft Edge to run the code
The issue is that the display: flex property ONLY applies to the DIRECT children of the flex container In this case you need to apply display flex- not to the header (which has only one child - but to the container that houses all the otgher parts - and then also to the ul as well to get the li's to be flexed.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
display: flex;
}
nav{
flex-grow: 1;
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
</div>
</header>
</body>
</html>
There are multiple issues with your code.
First: there is no display: flexbox -> should be display: flex
Also, you should use flex-direction: row to make it work.
But it still not enough because it has to be done on the parent element so you should add those to .logo-container instead of header.
EDIT:
The best way to understand flexbox is definitely https://flexboxfroggy.com/ -> you will get it in no time :-)
add this css
.nav-links{
display:flex;
flex-direction:row;
}
You might need to add margin yourself
I have tried explaining the areas which you could improve to obtain the desired layout. Highlighting some key pointers for better understanding the CSS flexbox behavior:
CSS flexbox behaves as the parent-child relation between items to be kept in flex, when parent element/tag is assigned display: flexit executes the flex behavior on it's direct children and not on the children of children, for that you will need to give display:flex to the child container.
The syntax for executing CSS flexbox on an element is display:flex only, other values shall not work and in some areas throw a syntax error.
The flex-direction concept works like when you need a side-by-side layout horizontally, the value that works is row and when you need a down-by-down layout vertically the value that works is column. Hope this throws a light on the concept of CSS Flexbox!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
/* display: flexbox */ /* syntactical error here display: flex; is the syntax */;
display: flex;
/* flex-direction: column */ /* in order to get a side-by-side layout value for flex-direction is row and if you want to set layout one below the other then it is column */;
flex-direction: row;
/* you could or could not give justify-content attribute as needed */
justify-content: space-between;
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
}
nav{
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!--<div class="logo-container"> -->
<!-- flexbox works nicely when given to parent and the parent contains direct children element in it's scope which needs to be flexified, introducing any other child container inside the parent to which flex is gievn will excute flex behaviour on it only and not on the sub children -->
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
</div>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
<!--</div> -->
</header>
</body>
</html>
I am terribly sorry guys . It was actually my mistake . The div element which is starting right after the header should have closed after the h4 but I accidently used it to cover the entire header due to which the problem occured .Once again I apologize for wasting your precious time. I AM REALLY SORRY.
I would like to have the text My homepage in the middle of the box I made. I saw an example on a web site but this does not work properly, as the text is on the left. How can I fix the code?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: ???px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto;">
<h1 id="begin"> My homepage </h1>
</div>
You see also: Block-level and inline elements
HTML
<div id="container">
<h1>My homepage</h1>
</div>
CSS
#container h1 {
text-align: center;
}
I also recommend reading: Descendant selectors, Child selectors and Adjacent sibling selectors
One simple line of CSS:
#container > h1 { text-align: center; }
<h1> is a block level element, so you can simply style it with text-align in your CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="begin"> My homepage </h1>
</body>
</html>
Maybe setting all text to be centered at the beginning and decide later what you want not centered,
* { text-align: center;
margin: 0;
padding: 0;
}
you could also center some or all elements at the beginning with the universal selector (*).
Or fix initially any propoerty that is very common on your page.
You can simply style h1 with css text-align :
text-align: center;
You don't need to wrap your h1 into div because h1 is a block level element
DEMO : http://jsfiddle.net/Vinyl/Ltqyfwn0/