How does div sub set div center to middle?
Text can be different, so margin or line-height in this situation is not a good solution.
CSS:
.center {
background-color: #336699;
width: 200px;
height: 200px;
}
.sub {
display: inline-block;
vertical-align: middle;
}
HTML:
<div class="center">
<span class="sub">
Some text text...
</span>
</div>
A possible solution is:
HTML
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
CSS
.center
{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub
{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
A live demo, if needed, are at http://jsfiddle.net/vladsaling/6nTGF/.
Related
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
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I Need to wrap the text in the right side respecting the left side and the column on the right in gray.
I have tried everything and searched on the internet, nothing seems to work.
I put min-width to the table-cell in the left side but then it takes space on the gray side.
add display:inline-block in stretch class and set your desire width
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I have a problem..
I am trying to make my footer bar but it is not going very well.
The copyright logo, the year and my name are on the left and the social icons have to go to the right. I can't solve this problem! ;( I can't float it to the right.
If someone knows how it works, please react! :D
footer {
width: 100%;
height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</span>
</div>
</footer>
Thank you for helping me!
Change your HTML and put the social icons before the copyright span:
<footer>
<div class="footerwidth">
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
<span>© 2016 Jasper Mulder</span>
</div>
</footer>
Move your .icons div outside the <span> and also add float: left to the span:
footer {
width: 100%;
height: 50px;
line-height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
float: left;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<a href="#">
<img src="../images/icons/facebook.png">
</a>
<a href="#">
<img src="../images/icons/instagram.png">
</a>
<a href="#">
<img src="../images/icons/linkedin.png">
</a>
</div>
</div>
</footer>
I also added line-height: 50px; as a little bonus ;)
Here you go, there are many solutions.
footer span {
position:relative;
top:15px;
left:-110px;
height: 50px;
}
Do not use table for layout.
http://codepen.io/damianocel/pen/BjdWWq
Here is the jsFiddle for your problem.
Please go through it.
https://jsfiddle.net/dhqp3Ln5/
css should be:
.footerwidth {
width: 80%;
margin: 0px auto;
PADDING-TOP: 15PX;
}
footer span {
display: inline-block;
height: 50px;
}
.icons {
float: right;
HEIGHT: 50PX;
width: 150px;
}
HTML should be:
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</div>
Demo: https://jsfiddle.net/9n4cav1o/
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>
I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.
I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/
If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/
My body currently looks like:
<header>
<p>Header</p>
</header>
<div class="main">
<div id="streamGraph" class="page">
<div class="page-row">
<div class="page-content-container-outer">
<div class="page-content-container-inner">
<div id="graphContainer" class="page-content"></div>
</div>
</div>
<div class="page-controls-container-outer">
<div class="page-controls-container-inner">
<div class="page-controls"><!-- If anything goes inside here, it breaks -->
<div style="display: table; height: 100%;">
<div style="display: table-row; height: 0;">
<div>
<label for="sampleCount"># Samples:</label>
<input type="text" id="sampleCount" name="sampleCount" value="100" />
</div>
<div>
<label for="tagCount"># Tags:</label>
<input type="text" id="tagCount" name="tagCount" value="25" />
</div>
<div>
<label for="fromDate">From:</label>
<input type="date" id="fromDate" name="fromDate" />
</div>
<div>
<label for="toDate">To:</label>
<input type="date" id="toDate" name="toDate" />
</div>
<button id="tagsButton">Customize Tags</button>
<button id="refreshButton">Apply</button>
</div>
<div style="display: table-row;">
<div id="tagContainer" style="overflow: auto; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
And my CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
}
header, .main, footer {
display: table-row;
width: 100%;
}
header, footer {
background: lightgray;
}
.main {
height: 100%;
}
.page {
height: 100%;
display: table;
}
.page-row {
display: table-row;
width: 100%;
}
.page-content-container-outer {
display: table-cell;
width: 100%;
height: 100%;
padding: 10px;
}
.page-controls-container-outer {
display: table-cell;
height: 100%;
padding: 10px;
}
.page-content-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
width: 100%;
height: 100%;
padding: 5px;
}
.page-controls-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
height: 100%;
padding: 5px;
}
.page-controls {
height: 100%;
width: 300px;
}
.page-content {
height: 100%;
}
Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:
div
{
vertical-align: top;
}
JSFiddle
Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.
Add vertical-align:top; to your .page-controls-container-outer class
Change this
<div style="display: table-row; height: 0;">
to this
<div style="display: table-row; height: 0; float:left;">