I cannot seem to get this to work and spending too many hours on this. I am assuming it should be simple. I am looking for the desired effect of having an image over top of some text and have them both centered horizontally, but ALSO have them vertically centered in the middle.
Any help would be appreciated!
A = a row, B = a column, C = an image, D = of text
#TO15108, this can be accomplished using a flexbox. To create one, set the display property value to flex.
From there, you can leverage the justify-content and align-items properties to get the vertical and horizontal centering you are trying to accomplish.
I've included a code snippet for you to see how this works. Make sure to expand it to it's full size.
.d-flex {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.col {
flex: 0 0;
max-width: 50%;
padding: 0px;
margin-right: 5px;
text-align: center;
}
<div class="d-flex">
<div class="col">
<img src="http://via.placeholder.com/350x150">
<div>some text</div>
</div>
<div class="col">
<img src="http://via.placeholder.com/350x150">
<div>some text</div>
</div>
</div>
You could use the a table: table cells can be aligned vertically using the "vertical-align:middle" property.
Here is a quick fiddle: https://jsfiddle.net/rL927hn0/
The page itself is a table:
#page {position:absolute;width:100%;height:100%;display:table;}
The content is placed within the table-cell (the A element in your example):
#content {display:table-cell;vertical-align:middle;text-align:center;}
Each section of the content (the B element in your example) is an inline-block:
.square {display:inline-block;}
Cheers
Related
So I've been struggling with this problem for a while and I can't find a good solution.
I want a thumbnail image to the left inside the div container and text next to the image BUT centered vertically.
Currently code looks like that:
.img-thumbnail{
display: inline-block;
vertical-align: middle;
float: left;
}
.text{
display: inline-block;
vertical-align: middle;
}
And the effect is like this:
http://prntscr.com/ff9mhi
However, if I remove float:left from the image they are both centered vertically inside their div, but that's not what im looking for. I need the image to be floated to the left, because it's gonna be smaller and the text is going to be long
Don't float the image, and only use vertical-align on the image.
.img-thumbnail{
display: inline-block;
vertical-align: middle;
}
.text{
display: inline-block;
}
<header>
<div class="img-thumbnail">
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
</div>
<div class="text">
text
</div>
</header>
You could also make the parent display: flex; align-items: center; to do the same thing with less code and have more options over positioning. I would recommend using this, but wanted to provide a solution with your original code, too, since you were close.
header {
display: flex;
align-items: center;
}
<header>
<div class="img-thumbnail">
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
</div>
<div class="text">
text
</div>
</header>
Im trying to create a small navigation using jquery and bootstrap. Im a bit stuck with aligning the images
i have 2 arrow images onto my left and right with the title in the center.
Below is my code
<div class="row" style="text-align:center">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" style="float:left">
<h2>Heading name or title</h2>
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png">
</div>
i did manage to set some margins and paddings and get it working but when the title gets longer the layout breaks also it doesnt work property on responsive views.
Can someone please suggest me a proper way to do this?
Thanks
Make the h2 an inline-block, apply vertical-align: middle; to the images and remove the float from the first image:
h2 {
display: inline-block;
}
img {
vertical-align: middle;
}
<div class="row" style="text-align:center;">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png">
<h2>Heading name or title</h2>
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png">
</div>
If you have not any other css, This is not what you want, You can use flex:
.row {
display: flex;
justify-content: center;
}
And remove the float: left from the image.
Also there is no need to text-align:center any more.
I have been trying to make a row of responsive boxes present a nicer look. After lots of effort and googling, I am here to get a word from experts. Please check the image below:
Outermost red is a bootstrap flexible row with display:flex;
Each box, the first of which is represented by green box, has flex: 1 ...;
Until this point, there is no issue and my CSS works perfect on all screen sizes showing all the boxes in same height and width. I just have two issues which I need help on.
Issue 1:
I need that lower part of box (represented by orange border) may always get positioned to the bottom of green box. This way all the buttons will appear in same line.
I tried to use a wrapper div in each box and then set position attribute for wrapper to relative and those of inner divs (yellow & orange) to absolute. Then I set the lower one to bottom: 0px;. But it does not work with flex and needs me to mention fixed height of wrapper which I cannot mention.
Issue 2:
In the box with the blue border I need the text of all lines to be justified except the last line which should be left aligned.
Issue 1
Assign display: flex to the div that is presented by the green box. After that, add align-self: flex-end; to the orange box. The orange box should now be displayed at the end of the green box.
Issue 2
Use the following fix to achieve what you want:
.blue-box {
text-align: justify;
-moz-text-align-last: right;
text-align-last: left;
}
The problem is that this wis not supported by Safari on Mac and iOS devices. You would have to add more markup to also cover Safari. An example would be to wrap each text line into a p tag if it's possible. Then you could do this:
.blue-box p {
text-align: justify;
}
.blue-box p:last-child {
text-align: left;
}
Please report back if the fixes do work for you or not.
The best way to solve this is to use flexbox.
.promo-boxes {
width: 100%;
display: flex;
justify-content: space-between;
background-color:black;
}
.promo-box {
width: 100px;
border: solid 1px #ccc;
background-color:red;
display: flex;
}
.btns-wrapper {
margin-top: auto;
align-self: flex-end;
}
<div class="promo-boxes">
<div class="promo-box">
<div>test 2</div>
<div class="btns-wrapper">
<button>
subscribe
</button>
</div>
</div>
<div class="promo-box">
<div>
test 3
</div>
<div class="btns-wrapper">
</div>
</div>
<div class="promo-box">
<div>
test 4 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
loooong
</div>
<div class="btns-wrapper">
</div>
</div>
</div>
I have a container with 3 children elements.
<div class="container">
<img />
<div class="element1"></div>
<div class="element2 bottom"></div>
</div>
They must be positioned as shown on the diagram below:
image is in the top of the left column and nothing goes below it (it is the only element in the left column)
element1 is in the top of the right column
element2 is stick to the bottom of the right column (and must not collide with the element1 which is above it)
Does somebody know how to achieve such layout using pure CSS? Ideally I wouldn't like to add any markup, but I can do that if that's the only possible way.
The biggest problem I'm facing here is how to stick that second element (non-image) to the bottom of the container without removing it from the flow. Because if I use position: absolute and remove it from the flow, the elment above it can collide with it (both elements have unknown height).
Here's a pen to work on: http://codepen.io/anon/pen/yNwGvQ
I would suggest you to use two columns in your html and then use the property display: flex; for your right column as suggested in the article A Complete Guide to Flexbox.
http://codepen.io/AlexisBertin/pen/QboYyY
All the HTML:
<div class="container">
<div class="column column-left">
<div class="image">This is an image</div>
</div>
<div class="column column-right">
<div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
<div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
Part of this CSS:
.column {
float: left;
height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right {
width: calc(100% - 100px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
Hope you get the idea. Good Luck'.
EDIT:
The easiest way to achieve this without declaring height to the container seems to only create a third parent div to the first block of the second column and define it as flex: 1; while the second block of this same second column would be define as flex: 0;.
http://codepen.io/anon/pen/yNwZmJ
More details explained in the comments.
The easiest solution I figured out is this one:
First you create this CSS:
.container {
width: 400px;
padding: 10px;
border: 1px solid red;
background-color: white;
}
.container > img {
float: left;
}
.container > div {
position: relative;
overflow: auto;
padding-left: 5px;
min-height: 120px;
}
.container > div > .bottom{
position: absolute;
bottom: 0;
display: block;
}
And then use these divs, depending on your content. The first one you use when you know your text is short:
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
</div>
<div class="bottom">
<p>This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
The second one you use when you know your text is long
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
<p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
</div>
<div>
<p>This container also has dynamic content so it's height is unknown and may change</p>
</div>
</div>
</div>
The difference is that you remove bottom class from the last div in your div that has long text.
Also in your CSS you can see .container > div{... min-height: 120px; ...}, you should set it to height of your image. In case you want the bottom text more down then you have to increase min-height to be bigger than your image height.
Here is it in action: http://codepen.io/anon/pen/YXgBXx
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.