<div class="list">
<div class="gif"><img></div>
<div class="info">
<div><span class="text">I am good</span></div>
</div>
</div>
.info {padding:7px 0 0 38px}
.text {word-wrap: break-word}
As wee can see, I added padding-top:7px to keep the texts center, if there is more words the texts go down a bit (image B).
What is (A solutions).
Try below code for vertical-align middle of any text.
.section {
display: table;
height: inherit;
min-height: 100%;
width: 100%;
}
.list {
display: table-row;
height: 100%;
width: 100%;
}
.gif, .info {
display: table-cell;
vertical-align: middle;
height: 100%;
}
.gif {
width: 15%;
}
.gif img {
height: 100%;
}
.info {padding:0 0 0 38px}
.text {word-wrap: break-word}
<div class="section">
<div class="list">
<div class="gif"><img src="http://image.made-in-china.com/3f2j00KNTaikdRZWbV/Small-Size-Colorful-Nature-Round-Shell-Sewing-Button-with-Two-Holes.jpg"></div>
<div class="info">
<div>
<span class="text">I am good</span>
<span class="text">I am good</span>
<span class="text">I am good</span>
</div>
</div>
</div>
</div>
Related
I am having trouble laying out my items in a gallery. I would like to be able to display an image in a horizontal or vertical format and have it fit within a fixed 300px x 300px box and align to the bottom of the box. I would like the "attribution" to line up with the right edge of the image. Here is a picture of the desired layout.
Picture of desired layout
This is the html:
.gallery {
display:flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
display: flex;
background: green;
}
.gallery_description {
height:auto;
width:100%;
}
.image_attribution {
display:flex;
flex-direction:column;
align-items:flex-end;
}
.image_square {
width: 100%;
height: 100%;
background: black;
display:flex;
flex-direction:column;
align-items:flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
}
.image {
height:100%;
background: green;
width:
}
.image_contain {
width: 100%;
height: 100%;
object-fit:contain;
object-position: bottom;
}
.attribution {
float:right;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I am unable to make the image fit within the box. Ive tried use "object-fit:contain" but to no avail. I would be grateful for any help you can offer.
Update: the code is almost working. The last item is to make the attribution align with edge of the image. align attribution to edge of image Here is the latest version of the code in Codepen.
https://codepen.io/acrossky/pen/KKoNdPX
Maybe something like this:
.gallery {
display: flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
background: green;
}
.gallery_description {
width: 100%;
height: auto;
}
.image_attribution {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.image_square {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
justify-content: center;
}
.image {
height: 100%;
width: 100%;
}
.image_contain {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
.attribution {
display: block;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I am using a centred div to contain an image and some text but want my title to have the same margin/alignment as the text. Right now the title is placed on the extreme left of the page and I want it to have a responsive margin on the left.
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text
</p>
</div>
<div class="col-sm" id="img">
<img style="height: 350px" src="which.png" alt="Which One">
</div>
</div>
</div>
there are two ways you could do this;
Add margin-left to the div h2 tag or add a container
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
.container-fluid h1 {
margin-left: 150px;
}
or you can over complicate it like I do and contain containers, I have added border outlines so you understand what that container is containing, if you wish to move the h1 and p text, you can margin-left them both.
.row {
max-width: 1150px;
height: auto;
border: 1px solid red;
}
.rowTextContainer {
float: left;
width: auto;
margin-left: 50px;
}
.rowText {
text-align: center;
border: 1px solid blue;
}
.row img {
width: auto;
padding-left: 20px;
}
<div class="row">
<div class="rowTextContainer">
<div class="rowText">
<h1>Title Text</h1>
<p>Text here.</p>
</div>
</div>
<img src="https://via.placeholder.com/350.png">
</div>
.row {
margin: auto;
max-width: 1150px;
display: flex;
flex-direction: column;
align-items: center;
}
.col-sm {
display: flex;
flex-direction: row;
margin-left: 10%;
}
img {
width: auto;
margin-left: 10px;
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text go ahead . . . . .
</p>
<img style="height: 350px" src="https://picsum.photos/200" alt="Which One">
</div>
</div>
</div>
I hope it will solve your problem.
I'm following this SO Answer to vertically align a div's contents that has float: left styling:
.main {
height: 85px;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
But, it doesn't vertically align as per the height of the wrapper div main. What is wrong in the code?
If you add
display: flex;
align-items: center;
to .main class, it should work.
.main {
height: 85px;
background-color: #f00;
/*position: absolute;*/
/*top: 2rem;*/
display: flex;
align-items: center;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
In the linked question, you can see that the line box aligns itself, but not exactly with the main - try setting a height for the main and you'll see.
You've height set for the main here and that makes all the difference. For this you can use a psuedo element to center:
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
See demo below:
.main {
height: 85px;
border: 1px solid;
}
.child_1,
.child_2 {
float: left;
}
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.
The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.
HTML:
<div class="container-fluid parameterContainer">
<div class="row paramHead">
<span class="virtAlignFix"></span>
<div class="centerText">
SPO2 (%)
</div>
</div>
<div class="row paramValWrapper">
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
200
</div>
</div>
<div class="row paramValue">
<span class="virtAlignFix"></span>
<div class="centerText">
80
</div>
</div>
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
40
</div>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.virtAlignFix {
line-height: 100%;
}
.parameterContainer {
height: 100%;
width: 100%;
}
.paramValWrapper {
height: 70%;
width: 100%;
}
.paramLimit {
height: 20%;
width: 100%;
text-align:center
}
.paramHead {
height: 30%;
width: 100%;
text-align:center
}
.paramValue {
height: 80%;
width: 100%;
text-align:center
}
.centerText {
vertical-align:middle;
display:inline-block;
}
Fiddle of my attempt:
http://jsfiddle.net/WCBjN/1173/
EDIT: added height % to body and page.
Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: https://jsfiddle.net/jL9bs0j7/
.text-container {
height:200px;
width:400px;
border: 1px solid #000;
text-align: center;
}
.text-container span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="text-container">
<span>Hello World</span>
</div>
I want to display a number and 2 text areas in a row.
The number should be in a "box" , with the background the height of the row and the number it's self should be vertically and horizontally centered in the "box".
I know I could do something like position: absolute; top: 0, left: 0 on the .number but this brings it out of the document flow. and the text, actual number does not get centered.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.number {
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
}
.row > div {
display: inline-block;
vertical-align: top;
}
.row {
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
EDIT 1: You can see in the snippet that the box is not the full height of the container. That is not what I want.
EDIT 2: I guess you could cheat by using gradient but then I would have to make sure that the text area matches up to where the number box end to make the gradient look like the color is for the number "box".
Use flex display: table-cell
Update 1: show how to create "margin" wíthout using cell padding
Update 2: show a progressive enhancement to use flex when available
*{
box-sizing: border-box;
}
.container {
width: 40%;
}
.number{
background: skyblue;
}
.row > div {
display: table-cell;
vertical-align: middle;
}
.row {
background: lightgreen;
position: relative;
}
/* 3 ways to create a left margin on textArea */
.row .textArea.nr1 { border-left: 10px solid transparent; }
.row .textArea.nr2 { position: relative; left: 10px; }
.row .textArea.nr3 { padding-left: 10px; }
/* feature detect - use flex when available */
#supports (display: flex) {
.row > div {
display: block;
}
.row {
display: flex;
}
.row .number {
display: flex;
align-items: center;
}
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr1">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr2">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr3">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
You can use flexbox to achieve that, all modern browsers support it, and with prefixes it also works on IE10.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: flex;
}
.number {
background: skyblue;
display: flex;
align-items: center;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
Or, use CSS table making it to work on legacy browsers too.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: table;
width: 100%;
}
.number,
.textArea {
display: table-cell;
}
.number {
background: skyblue;
white-space: nowrap;
vertical-align: middle;
}
.textArea {
width: 100%;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.container{
width: 40%;
}
.number{
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
height: 40px;
padding-top: 11px;
}
.row > div{
display: inline-block;
vertical-align: top;
}
.row{
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>