I would like to create this layout:
I can get most of the way using flexbox and align-self: baseline:
<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
<div style="font-size: 24pt">Ferry to Brookfield</div>
<div style="font-size: 96pt; align-self: baseline">3</div>
<div style="font-size: 9pt; align-self: baseline">min</div>
</div>
This looks like (JSFiddle):
From here, I can't figure out how to add the text "leave in" so that its baseline aligns with the text "3 min". Here's an attempt (JSFiddle).
How can I create this layout in CSS?
Try this...
<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
<div style="display: flex; flex-direction: row;justify-content: space-between">
<div>
<h1 style="font-size: 24pt;font-weight:300;margin-bottom:47px">Ferry to Brookfield</h1>
<div style="font-size: 9pt; text-align: right;">leave in</div>
</div>
<div style="font-size: 96pt">3<span style="font-size:9pt">min</span></div>
</div>
</div>
you can do this with absolute positioning and pseudo elements:
.wrapper{
background-color: #fce5cdff;
display: flex;
height: 4.35cm;
font-size: 24pt;
}
span{
font-size: 96pt;
line-height: 96pt;
position: relative;
margin-left: 2pt;
}
span::before {
content: "leave in";
position: absolute;
font-size: 10pt;
bottom: 6pt;
left: -6ch;
}
span::after {
content: "min";
position: absolute;
font-size: 10pt;
bottom: 6pt;
right: -3ch;
}
<div class="wrapper">
Ferry to Brookfield <span>3</span>
</div>
Related
I have a DIV that contains text which is transformed, but the text goes outside the DIV (blue). How can I have the text rotate, but wrap and stay inside the box?
<div style="display: flex; background-color: lightblue; align-items: center; margin: 6in 1in 1in;">
<span style="transform: rotate(90deg); font-size: 12pt; text-align: center;">Blessings to you my Sister as you celebrate this milestone. Love and light, Eva </span>
</div>
Try CSS writing-mode. It makes it so that only the text changes instead of the whole element.
<div
style="
display: flex;
background-color: lightblue;
align-items: center;
justify-content: center;
margin: 1in 1in 1in;
"
>
<span
style="writing-mode: vertical-rl; font-size: 12pt; text-align: center;"
>Blessings to you my Sister as you celebrate this milestone. Love and
light, Eva
</span>
</div>
<div class="box">
<div class="text">
<p>Blessings to you my Sister
as you celebrate this milestone.
Love and light, Eva </p>
</div>
</div>
<style>
body {
background-color: yellow;
display: flex;
}
.box {
background-color: lightblue;
margin: 4in;
transform: rotate(90deg);
align-items: center;
}
</style>
I've rows with two flex divs inside each one. In one div i show an image and inside the other there is text. I don't understand why some divs shows correctly but in others the text overflows.
If i reload the page this bug disappears but if i delete cache it comes again.
Any ideas? Thanks in advance.
.box {
position: relative;
}
.image-box-right, .image-box-left {
width: 50%;
}
.image-box-left {
float: left;
}
.image-box-right {
float: right;
}
.title {
font-size: 0.95em;
}
.text-box-right, .text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
.text-box-left {
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-right" src="img/image1.jpg">
<div class="text-box-left dark">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html"> MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-left" src="img/image2.jpg">
<div class="text-box-right">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html">MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
I don't think you need inline-block:
.notes-text-box-right, .notes-text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
You wrote two displaysettings in one CSS rule:
.notes-text-box-right, .notes-text-box-left {
[...]
display: flex;
[...]
display: inline-block;
[...]
}
The second one overwrites the first one, so you better erase that.
For a personal project with Angular, Angular Material and Flex-Layout I am trying to achieve a similar layout used by Bring! App:
Having images of different size (not all squared) I would like to center them proportionally and allow some text under them.
I have the following template and scss styles:
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/milk.png" alt="Latte" />
</div>
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
//---------------------------------------------------
.cards-container {
flex-wrap: wrap;
.item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px 0;
img {
width: 40%; // TODO: how to scale?
height: 40%;
}
.text-container {
display: flex;
flex-direction: column;
.item-name {
display: inline-block;
font-size: 1.1em;
}
.description {
width: 99%;
font-size: 0.8em;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
}
}
}
However the images do not scale down to keep the proportions with the others images, especially if narrow and long.
It all seems to look fine but it looks like your HTML code is missing the .text-container div and class.
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
should be
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
Now for the text-overflow: ellipsis; this doesn't work on multi-lines unless you implement some JavaScript or something.
If there is any change to your code, I'd make the images a background-image instead. There could be other ways without this, but it's what I use to make sure the container is responsive with the image always responsive and centred.
For Example: https://codepen.io/StudioKonKon/pen/wRjOzr (Includes SCSS)
.image {
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
font-size: 0;
}
.image-mela {
background-image: url("https://via.placeholder.com/150x175");
}
.image-latte {
background-image: url("https://via.placeholder.com/200x50");
}
.image-long {
background-image: url("https://via.placeholder.com/50x100");
}
.cards-container {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.cards-container .item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px;
padding: 0.5em;
box-sizing: border-box;
overflow: hidden;
}
.cards-container .item-card .image {
display: block;
margin: auto;
width: 40%;
height: 40%;
}
.cards-container .item-card .text-container {
display: flex;
flex-direction: column;
}
.cards-container .item-card .text-container .item-name {
display: inline-block;
font-size: 1.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cards-container .item-card .text-container .description {
font-size: 0.8em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image image-mela">Mela</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
<div class="item-card">
<div class="image image-latte">Latte</div>
<div class="text-container">
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
<div class="item-card">
<div class="image image-long">Long Image</div>
<div class="text-container">
<span class="item-name">Long Image Text</span>
<span class="description">must be hidden if long text</span>
</div>
</div>
</div>
Have you tried:
img {
width: 40%;
height: auto;
}
It should leave the image proportions consistent.
It is simple. I think it will solve the problem. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>item</title>
<style type="text/css" media="screen">
.item-single{
width: 100px;
background-color: #e7e7e7;
height: 100px;
text-align: center;
}
.item-single span{
display: block;
border: 1px solid #000; /* just to show the alignment */
}
.item-single img{
width: 50%; /* you can scale it down using width */
border:1px solid #000; /* just to show the alignment */
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="item-single">
<img src="http://sugamparajuli.com.np/wp-content/uploads/2019/01/banana.png">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</body>
</html>
This is the result.
item-image
I've looked several times though all the posts I found online as well as here, but none of the methods seem to work.
The question might be a repeat of a common subject but the problem might be specific to this code...
<section class="x-graphic">
<div class="container">
<div class="col-md-2">
<img src="images/x1.png" class="x1">
</div>
<div class="col-md-1">
<img src="images/x2.png" class="x2">
</div>
<div class="col-md-2">
<div class="row x-items">
<div class="imageOne">
<img src="images/imageOne.png" title="imageOne"> text <p id="imageOne"></p>
</div>
<div class="imageTwo">
<img src="images/imageTwo.png" title="imageTwo"> text <p id="imageTwo"></p>
</div>
<div class="imageThree">
<img src="images/imageThree.png" title="imageThree"> text <p id="imageThree"></p>
</div>
<div class="imageFour">
<img src="images/imageFour.png" title="imageFour"> text <p id="imageFour"></p>
</div>
</div>
</div>
</div>
</section>
My CSS is:
body {
padding-top: 90px;
overflow-x: hidden;
}
.x1{
margin-top: 5%;
margin-left: 10%;
width: 160px;
margin-top: 20px;
}
.x2 {
width: 50px;
margin-top: 120px;
}
.x-items img {
height: auto;
width: 30px;
}
.x-graphic p {
margin-top: 130px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: bold;
color: #000;
display: inline;
}
section p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 40px;
}
Problems:
1) Nothing I do centers the <img> in the x-items row to the vertical center. I can center it horizontally, but not vertically.
2) I can't center the elements inside the container horizontally, and i'm only able to do this using a col-md-offset-x...
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>