I think I'm basically there. I've got a DIV at 200px in height and an inner at 150px. This leaves me 50px for the image caption. I want to then vertically center the text within the remaining 50px.
.captioned {
width: 300px;
height: 200px;
display: flex;
margin: 10px;
background-color: #FFFFFF;
border: solid 4px #000000;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.captioned-inner {
width: 100%;
margin: 0;
}
.preview {
height: 150px;
width: 100%;
}
.preview-image {
height: 100px;
max-width: 100%;
margin-top: 25px;
margin-bottom: 25px;
}
.info {
padding: 5px;
box-sizing: border-box;
height: 50px;
}
.info-inner {
box-sizing: border-box;
}
.name {
font-family: 'Roboto', sans-serif;
font-size: 25px;
display: block;
margin-top: 0;
margin-bottom: 0;
line-height: 1;
overflow-wrap: anywhere;
}
<div class="captioned">
<div class="captioned-inner">
<div class="preview" style="background-color: #DE16C7 !important">
<img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="info">
<div class="info-inner">
<p class="name">Google</p>
</div>
</div>
</div>
</div>
I hope the code makes sense for what I'm trying to acheive. I'm wondering how I can go about incorporating the padding in the 50px height unless I should vertically center and pad the text but that seems a worse way to do it.
Just use display:flex and align-items:center to vertically align the text
Also as you have given box-sizing:border-box in .captioned class so it would include the border as well in the 200px height that means
height of the container + top border + bottom border=200px
so the height of .preview container should be 150px - top border(i.e 4px)=146px and for .inner container it will be 50-4 =46px;
This will work for you.
.captioned {
width: 300px;
height: 200px;
display: flex;
margin: 10px;
background-color: #FFFFFF;
border: solid 4px #000000;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.captioned-inner {
width: 100%;
margin: 0;
}
.preview {
display: flex;
justify-content: center;
align-items: center;
height: 146px;
width: 100%;
}
.preview-image {
height: 100px;
max-width: 100%;
}
.info {
display: flex;
align-items: center;
box-sizing: border-box;
height: 46px;
}
.info-inner {
box-sizing: border-box;
}
.name {
font-family: 'Roboto', sans-serif;
font-size: 25px;
display: block;
margin-top: 0;
margin-bottom: 0;
line-height: 1;
overflow-wrap: anywhere;
}
<div class="captioned">
<div class="captioned-inner">
<div class="preview" style="background-color: #DE16C7 !important">
<img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="info">
<div class="info-inner">
<p class="name">Google</p>
</div>
</div>
</div>
</div>
Related
I want to have a welcome page like this:
But instead I get this:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
align-items: center;
}
#container1 {
height: 100%;
vertical-align: middle;
display: table-cell;
background-color: yellow;
display: flex;
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
float: left;
width: 100%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
float: left;
width: 100%;
}
<main id="container1" class="container my-6">
<div class="">
<div id="left" class="col-lg-6 my-3">
</div>
</div>
<div class="">
<div id="right" class="col-lg-6 my-3">
</div>
</div>
</main>
I don't know why my container doesn't fully fit the body of the page, and my left and right don't go in the middle and stretch width to each other's end.
You have a bunch of errors in your code. I commented out the CSS you don't need:
No need for float, that's what flex is for.
display: table-cell is being overwritten by display: flex
Use flex to set the properties of your left and right divs.
Remove the containing elements around those.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
/* NOT NEEDED: align-items: center;*/
}
#container1 {
width: 100%;
height: 100%;
vertical-align: middle;
/* NOT NEEDED: display: table-cell; */
background-color: yellow;
display: flex;
/* This is probably unneeded. align-items, aligns elements on the cross access - which in this case would be vertically aligned in the center since flex-direction by default, is row */
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
flex: 1 1 50%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
flex: 1 1 50%;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
}
<main id="container1" class="container my-6">
<div id="left" class="col-lg-6 my-3">
</div>
<div id="right" class="col-lg-6 my-3">
</div>
</main>
The problem comes mostly from the divs without classes, that shouldn't be there.
But you're also mixing floats, with flex and tables. Just stick with flex like in this example:
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100%;
display: flex;
}
.left,
.right {
width: 50%;
height: 100%;
}
.left {
background: #215f40;
}
.right {
background: #092414;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've recently started doing frontend and I've run into a bit of a problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
You can run the code here. The problem is with aligning the red buttons with the navbar (header). The buttons are supposed to stretch from the top to the bottom of the navbar, but they aren't aligned to the top. This is caused by the head-title element. If the font size is set to 1em, then the problem disappears. Why is this happening? Any help is appreciated.
Set vertical-align: top; on the .head-button:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
Try adding vertical-align: top; to .head-button class so the blocks will be aligned to top.
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
Try using display:flex css property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
align-items: center;
}
.head-title {
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
margin-right: 8px;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
</style>
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
Try to use modern solution and !coding not a property such display: inline-block or vertical-align: top that almost is old and obsolete, in this case when you want to put element side by side and align them in a certain row you can use flex on their parents like below example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
With flex you can control parent and also child alignments! something like justify-content: center; or align-items: center;
Try this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
/** My Code **/
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
width: 260px;
height: auto;
margin: 0 10px;
vertical-align: middle;
}
.head-button {
display: inline-block;
width: 80px;
line-height: 2.5em;
background-color: red;
text-align: center;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
I'm aware of This Question and many others like it. I have reviewed several edge cases similar to mine, and none of the fixes I've tried have worked.
I have an image and text. I want the text centered below the image. What I'm getting is the paragraph always aligned to the left edge of the image and growing to the right, rather than being centered on the image such as the image below. The image itself has even-width transparent borders on each edge, the size of which you can determine by knowing the left edge of the paragraph is aligned with the left edge of the image (it's very small).
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 5vw;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
You can use margin:auto to get this fixed.
Add a class .center-items to the parent a tag of the image with the following properties :
.center-items > img,p {
display : block;
margin : auto ;
}
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 50px;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
.center-items > img,p {
display : block;
margin : auto ;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#" class="center-items">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
it may work.. plz modify the css code..
css
*,
*:after,
*:before {
margin: 0;
padding: 0;
/* Removes padding behaviour on widths */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu-card {
margin: 0px;
text-align: center;
}
Thanks to #TheVigilant for putting me on the right path:
.menu-icon-container a {
width: auto;
vertical-align: top;
display: inline-flex;
justify-content : center;
}
.menu-icon-container > img, p {
margin: auto;
display: block;
}
I have an issue. I want the div with the image to have the same height (scaling when you resize the window). Could anyone help me out here? I don't get why the height: 100%; doesn't make it's size as big as the parent div.
body {
background-color: darkred;
color: #bfbfbf;
font-family: Roboto, serif;
}
.image {
float: left;
width: 30%;
margin: 0 .5% .5% 0;
border: 1px solid white;
box-sizing: border-box;
}
div.head:after {
content: "";
display: table;
clear: both;
}
header {
float: right;
width: 69%;
height: 100%;
background-color: black;
border: 1px solid white;
box-sizing: border-box;
}
.image img {
width: 100%;
}
<div class="head">
<div class="image">
<img src="../assets/Triumph_Spitfire.jpg" alt="">
</div>
<header>
<h1>Triump Spitfire</h1>
<hr>
<p>“poor man’s Jaguar E-type”</p>
</header>
</div>
flexbox can be a really good solution here. I removed your floats and set a header size. Setting a height on parent is the easiest way to make children follow that constraint.
body {
background-color: darkred;
color: #bfbfbf;
font-family: Roboto, serif;
}
.image {
height: 100%;
width: auto;
margin: 0 .5% .5% 0;
border: 1px solid white;
box-sizing: border-box;
}
.head {
display: flex;
height: 135px;
}
div.head:after {
content: "";
display: table;
clear: both;
}
header {
flex: 1;
height: 135px;
background-color: black;
border: 1px solid white;
box-sizing: border-box;
}
.image img {
width: auto;
display: block;
height: 100%;
}
<div class="head">
<div class="image">
<img src="https://via.placeholder.com/350x250" alt="">
</div>
<header>
<h1>Triump Spitfire</h1>
<hr>
<p>“poor man’s Jaguar E-type”</p>
</header>
</div>
You can add 'display: flex, align-items: stretch' to your div with the class 'head'. See fiddle here: https://jsfiddle.net/kqwe4jma/1/
.head {
display: flex;
align-items: stretch;
}
I am working on a webpage and the idea is that there are boxes at the bottom
of the page with some text on it. So making a box is not that hard,
but my question is: How can you make the boxes like this that I drew:
How can you make/arrange the boxes like on the link I provided. My attempts at making it the same has thus far failed, the boxes aren't appearing or it looks very messy.
So far I have this:
.div1 {
width: 500px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.div2 {
width: 200px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
color: #fff;
margin-left: 5%;
}
.container2 {
float: left;
margin: 0 auto;
width: 100%;
display: flex;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>
You can put them in a flex wrapper and define the containers themselves also as flex containers with flex-direction: column as shown below.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
width: 100%;
}
.container1,
.container2 {
display: flex;
flex-direction: column;
}
.container1 {
width: 70%;
}
.container2 {
width: 30%;
}
.div1 {
width: 90%;
height: 100px;
border-radius: 25px;
padding: 15px;
background: #73B7DB;
margin-left: 5%;
color: #fff;
margin-bottom: 10px;
}
.div2 {
width: 90%;
height: 160px;
border-radius: 25px;
padding: 15px;
background: green;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container1">
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
</div>
<div class="container2">
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
</div>
</div>
isn't flex-direction: column; he need to use flex-wrap:wrap; in container 2, beacause when you use display:flex; , flexbox dont respect the width of the elements, then you need to apply the property flex-wrap:wrap;. i'll recommend you use porcentege instead pixels
.div1,.div2 {
width: 100%;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.container2 {
float: left;
margin: 0 auto;
width: 68%;
display: flex;
flex-wrap:wrap;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>