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.
Related
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
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>
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 vertically align using the table/table-cell method.
JSFiddle
<div class="row">
<div class="small-6 columns valign">vertically align me</div>
<div class="small-6 columns"><p>content</p>.....</div>
</div>
.row{
display: table;
}
.valign{
display: table-cell;
vertical-align: middle;
background: grey;
height: 100%;
}
But it's not working, where am I going wrong? I suspect it is something to do with the height of the valign column. How can I get this to stretch to the height of it's parent?
I should also mention in my actual code I have the code nested quite deep in the page, so it's inside article and section tag and another div too.
On some browsers CSS property float does not work with display: table-cell so you should set float: none to table-cell elements in order to make them act like table cells
https://jsfiddle.net/zac926wL/5/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Vertically Center HTML Element Within a Div of Dynamic Height
I am currently designing a website for which i need to vertically center some content. The design is pretty basic: a fixed height header (left-aligned and always at the top of the page), and underneath that vertically centered images in a horizontal row (yes, horizontal scrolling, i know).
Ideally i would want the vertical centering of the images to be based on the 100% height of the viewport - the header (so a dynamic height that prevents the content from overlapping the header).
An example of the website can be found on http://bit.ly/vl1XNY, which is currently using tables for layout. The css and html i used can be found there too (of course).
I am aware of various solutions for centering content vertically within a container of fixed height, however none of them have worked for me because i'm using variable height and do not want to use absolute positioning (to prevent overlap). I have looked around and tried the table-cell solution, the line-height one, and the absolute positioning one.
So far the only solution that has worked exactly as i intended was using tables. But i would like to refrain from using them. Is anyone aware of a valid css and html solution for this problem? Or at least a more graceful solution?
Wohh, talk about timing, i was looking for such a solution just a few minutes ago and stumbled upon an article on this subject exactly, you can read it all about it here: Centering in the Unknown.
You can easily modify your code to make it work like so:
CSS
#wrapper {
background: none repeat scroll 0 0 blue;
height: 100%;
text-align: center;
}
#wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
padding: 10px 15px;
vertical-align: middle;
width: 460px;
}
HTML
<div id="wrapper">
<div class="center">
<img src="images/a_1.jpg" alt=" ">
</div>
<div class="center">
<img src="images/a_2.jpg" alt=" ">
</div>
</div>
You can try the following code:
<div style="display:table-cell;">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
Please check the above code in the context of all HTML:
<style type="text/css">
html, body {height:100%;}
body {
margin:0; padding:0;
}
#header {
height:1.7em;
}
#content {
display:table-cell; vertical-align:middle; height:500px;
}
</style>
<div id="header"></div>
<div id="content">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
This will only work with a fixed height table-cell, which can be achieved by calculating current viewport height with javascript