Is there a way I could attain a 2 1 alignment? Trying to achieve this via flexbox, But there doesn't seem to be an option for this directly in flexbox.
I'm looking to achieve the alignment 2 in a row and 1 to the right side aligned to the middle of the 2 as follows.
This is the current outcome with my CSS.
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</body>
</html>
My CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
I added a div in you html and a couple of classes, and changed the css a bit:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
justify-content: space-around;
}
.content h4{
margin-bottom: 20px;
color: #DDDDDD;
}
.arrow{
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<div class="content">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
</div>
<i class="fa fa-angle-right arrow"></i>
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to make a decent navigation bar filled with a logo image however the text refuses to utilize any vertical height and I need the text-box to utilize 100% of it's vertical height
As you can see in the image, the textbox is only clickable within that border and it isn't using any vertical height which I want it to use
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.navigation-bar {
padding: 3px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e31f1f;
}
.navigation-item {
height: 100%
margin: 5px;
border: 1px solid #4848b9;
flex: 1 1 35em;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-item a {
overflow: hidden;
float: none;
}
.navigation-item a:hover {
}
.current-item {
}
.logo {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
You can use grid for your container to make the row occupy exactly 1fr. After that just add flexbox to your div's that are directly below your parent container to enable flex-grow on your navigation-item or <a> tags. After that it's just a matter of centering the text vertically and horizontally inside the navigation-item. See the snippet below, if it's what's you're looking for.
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navigation-bar {
padding: 3px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(5, 1fr);
background-color: #e31f1f;
}
.navigation-item {
border: 1px solid #4848b9;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-bar > div{
display: flex;
justify-content: center;
text-align: center;
}
.navigation-item a:hover {}
.current-item {}
.logo {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I need to align the image and hamburger icon in one line exactly in the center. I am using display-flex and align-item: content, but the icon and image are not aligning with other items also.
I am getting the alignment as is shown in the following picture:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header {
display: flex;
align-items: center;
padding: 1rem;
}
.header__left {
align-items: center;
}
.header__logo {
height: 25px;
object-fit: contain;
}
.header__option__nav {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>Navigation Menu</title>
</head>
<body>
<div class="header">
<div class="header__left">
<img class="header__logo" src="https://toppng.com/uploads/preview/fire-logo-png-svg-free-download-fire-logo-11563553513c3wo0p7dt1.png" />
<a>
<i class="fas fa-bars"> </i>
</a>
</div>
<div class="header__option">
<ul class="header__option__nav">
<li><i class="fas fa-globe"></i><a>Company</a></li>
<li><i class="fas fa-street-view"></i><a>Branch</a></li>
<li><i class="fas fa-users"></i><a>Employee</a></li>
</ul>
</div>
</div>
</body>
</html>
Why is the hamburger icon is not aligned with other text? What is the appropriate way for doing this?
You just need to add display: flex to your header_left class. Flex doesn't get inherited by children containers of a flex parent and align-items has no meaning outside of flex and grid contexts.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header {
display: flex;
align-items: center;
padding: 1rem;
}
.header__left {
display: flex;
align-items: center;
}
.header__logo {
height: 25px;
object-fit: contain;
}
.header__option__nav {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>Navigation Menu</title>
</head>
<body>
<div class="header">
<div class="header__left">
<img class="header__logo" src="https://toppng.com/uploads/preview/fire-logo-png-svg-free-download-fire-logo-11563553513c3wo0p7dt1.png" />
<a>
<i class="fas fa-bars"> </i>
</a>
</div>
<div class="header__option">
<ul class="header__option__nav">
<li><i class="fas fa-globe"></i><a>Company</a></li>
<li><i class="fas fa-street-view"></i><a>Branch</a></li>
<li><i class="fas fa-users"></i><a>Employee</a></li>
</ul>
</div>
</div>
</body>
</html>
Well, you need another display: flex; for your .header__left property like this:
.header__left {
display: flex;
align-items: center;
}
Otherwise, align-items: center; alone won't apply to that property.
So your final code would be something like this:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header {
display: flex;
align-items: center;
padding: 1rem;
}
.header__left {
display: flex;
align-items: center;
}
.header__logo {
height: 25px;
object-fit: contain;
}
.header__option__nav {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>Navigation Menu</title>
</head>
<body>
<div class="header">
<div class="header__left">
<img class="header__logo" src="https://toppng.com/uploads/preview/fire-logo-png-svg-free-download-fire-logo-11563553513c3wo0p7dt1.png" />
<a>
<i class="fas fa-bars"> </i>
</a>
</div>
<div class="header__option">
<ul class="header__option__nav">
<li><i class="fas fa-globe"></i><a>Company</a></li>
<li><i class="fas fa-street-view"></i><a>Branch</a></li>
<li><i class="fas fa-users"></i><a>Employee</a></li>
</ul>
</div>
</div>
</body>
</html>
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have problem : my picture doesn't want to center despite I used text-aligne:center;, display:block; and margin: 0 auto;
Here is a picture
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
max-width: 1000px;
margin: 0 auto;
}
#Logo {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>str</title>
<meta name="description" content=" bbbbbbb" />
<meta name="keywords" content="bablal" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="new.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext" rel="stylesheet">
</head>
<body background="photo/ik.png">
<div id="container">
<div id="Logo">
<img src="photo/lg.png" width="800" height="533.5">
</div>
</div>
</body>
</html>
One way to do it using Flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
background: yellow;
height: 100vh;
width: 100vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="Logo">
<img src="http://placehold.it/200x100/333333">
</div>
</div>
change #container {max-width:1000px to width:100%}
Set the margin property of the image itself to auto on the left and right.
HTML part
<body>
<div id="container">
<div id="Logo">
<img class="centeredimage" src="photo/lg.png" width="80" height="50">
</div>
</div>
</body>
CSS part
img.centeredimage{
display: block;
margin-left: auto;
margin-right: auto;
}
Fiddle:
https://jsfiddle.net/ja0zhnsd/
Try This:
.Image{
background:#ccc;
padding:30px;
}
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
#container {
width: 100%;
}
#Logo img {
text-align: center;
margin: 0 auto;
}
Does this work?
use this code this will done your job. cheers!
<p style="text-align:center;">
<img src="yourimage.png" alt="Dev N Technologies" width=600 height=200 >
I am playing with Flexbox for the first time and I wonder why doesn't the property align-items: flex-end work with justify-content: center. I tried changing as well to other values rather than flex-end but still nothing would move around the cross axis.
Here is my HTML/CSS Code. What am I doing wrong?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Playing with CSS Flexbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
<nav id="logo">
<p class="logotext">Welcome There!!</p>
</nav>
-->
<main id="container">
<section class="box red-box">
<!--
<img src="images/Chilli-medium.jpg" alt="chilli" class="first-image">
-->
</section>
<section class="box green-box">
</section>
<section class="box blue-box">
</section>
<section class="box violet-box">
</section>
<section class="box black-box">
</section>
<section class="box yellow-box">
</section>
<section class="box grey-box">
</body>
</html>
body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: white;
}
#container {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-end;
}
.box {
padding: 50px;
box-sizing: border-box;
height: 50vh;
width: 5vw;
}
.red-box {
background-color: indianred;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
.violet-box {
background-color: rebeccapurple;
}
.black-box {
background-color: black;
}
.yellow-box {
background-color: yellow;
}
.grey-box {
background-color: grey;
}