I have a text inside the div with class message, and I want to move the div to vertical center with respect to parent div with class banner.
Please refer the JsFiddle here - https://jsfiddle.net/1rbhuwfs/
Whenever I try to set margin-bottom, it goes increasing beyond the parent div indefinitely, which I don't understand why. The parent div has display: block on it.
I prefer not to have any position: absolute in my code.
Thanks in advance.
Check below snippet, I have added
.banner > div {
vertical-align:middle;
}
and removed margin-bottom: 40px; form .message.
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.banner > div {
vertical-align:middle;
}
.img-1-holder {
display: inline-block;
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
display: inline-block;
}
.img2 {
height: 100px;
}
.message {
display: inline-block;
}
<div class="banner">
<div class="img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="message">
Some random text here
</div>
<div class="img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
Check jsfiddle, put parent to display:table and child to display: table-cell and vertical-align: middle.
https://jsfiddle.net/ggq39acr/
You can refer this too. https://www.w3.org/Style/Examples/007/center.en.html
The solutions suggest in this link works in general ! :D
One way to vertically center without position: absolute or using tables - and respecting your margin-bottom on image and text-div - is to use flexbox:
Add/change this:
.banner {
display: flex;
align-items: center;
}
https://jsfiddle.net/5496yk1k/
you can use flexbox fiddle
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: flex;
justify-content: center;
align-items: center;
}
In this case you can remove the margins on
.img1 {
height: 70px;
}
.message {
display: inline-block;
}
You can try to include a common class suppose img-inline with inline css properties and manage other css properties in your classes .img-1-holder, .img-2-holder and .message
Here is a sample code for you. You can try it in your jsfiddle. Sorry I am not posting fiddle link here.
HTML CODE
<div class="banner">
<div class="img-inline img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="img-inline message">
Some random text here
</div>
<div class="img-inline img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
CSS CODE:
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.img-1-holder {
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
margin-left: 15px;
}
.img2 {
height: 100px;
}
.img-inline {
display: inline-block;
vertical-align: middle;
}
Hope this helps :)
Related
I am looking for solution of how can I align text with image and the image remains unstretched.
I am using the following code which in reactjs
return (
<div className="App">
<div style={{ marginTop: 10 }}>
<div className="import-option">
<img
src={`https://uploads.codesandbox.io/uploads/user/7b703edc-140c-4f14-aa28-17e618788f1e/9zzd-download.png`}
/><span className="import-option-button"> User Import(CSV)</span>
</div>
<div className="import-option">
<img
src={`https://uploads.codesandbox.io/uploads/user/7b703edc-140c-4f14-aa28-17e618788f1e/9zzd-download.png`}
/><span className="import-option-button"> User Import(Export)</span>
</div>
</div>
</div>
);
and following css
.App {
font-family: sans-serif;
text-align: center;
}
.import-option-button {
text-decoration: underline;
font-size: 12px;
color: #4da1ff;
}
.import-option-button:hover {
cursor: pointer;
}
.import-option {
padding-bottom: 5px;
}
Here is the demo which contains the code.
This is what I want to achieve
Problems in the demo are
Image is stretched
It is not aligned to left like in the screenshot
How to solve above problems.
Please help.
Thanks.
At the moment you have .App as text-align: center. this means that all your text in the code will be centre aligned unless you state otherwise in the child divs.
.import-option {
padding-bottom: 5px;
text-align: left!important;
margin-left: 350px;
}
Here is your demo updated
Add CSS for image:
**.import-option img { vertical-align: bottom; }**
I have checked and modified your code please use the following css in addition
.import-option {
padding-bottom: 5px;
clear: both;
}
.import-option img{
width: 20px;
height: 20px;
float: left;
margin: 0 4px 0 0;
}
.import-option span{
float: left;
padding: 7px 0;
}
Updated Code Demo : https://codesandbox.io/s/y05167v0lv
Just simply apply flex property to the .import-option
.import-option {
display: flex;
align-items: center;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
basically pic1 will have the height of pic2+pic3.
And all pic1,2,3 will be in the same block, pic2 and pic3 and pic1 will have the same width
pic1 on the left and pic2,3 on the right.
My code, which doesn't work...please help:
<div class ="row">
<span class ="row_1">
<img src="image/under.png" />
</span>
<span class ="row_2">
<img src="image/under.png" />
<img src="image/under.png" />
</span>
</div>
CSS:
.row_1 img {
display: inline-block;
width: 100px;
height: 100px;
}
.row_2 img {
display: inline-block;
width: 30px;
height: 30px;
}
I believe this is what you want. In order to adhere to W3C standard's block level elements cannot be nested inside those that are inline, however inline-block allow's you to do this. The only thing to note is that the display value of inline-block is not completely browser backward compatible, specifically IE7 and below.
.row_1 img{
width: 100px;
height: 100px;
}
.row_2 img{
width: 30px;
height: 30px;
}
.row_1,
.row_2{
display: inline-block;
}
.row_2 img{
padding-top: 5px;
display: block;
}
.row_2 img:first-child{
padding: 0;
}