I have a div element in my page, and an arrow, that I am trying to get to the right middle of the div. Here's the code:
HTML:
<div id="popup">
<p>
This is the inside of a div element.
</p>
</div>
<div id="image"></div>
CSS:
#popup {
background-color: whiteSmoke;
width:500px;
margin:0px auto;
margin-top:100px;
}
#image {
background-image:url('/images/jquerys penis.png');
border:1px solid black;
width:30px;
height:30px;
float:right;
}
Website that I'm working on: site.brycemckenney.com/jquery.html
I had to modify your markup a little: http://jsfiddle.net/Wexcode/y7jTb/
HTML:
<div id="popup">
<p>This is the inside of a div element.</p>
<div id="image"></div>
</div>
CSS:
#popup {
width: 500px;
white-space: nowrap;
margin: 0 auto; }
#popup * { white-space: normal; }
#popup p {
background-color: whiteSmoke;
vertical-align: middle;
display: inline-block; }
#image {
background: url('http://site.brycemckenney.com/images/jquerys%20penis.png') 0 0 no-repeat;
border: 1px solid black;
width: 30px;
height: 30px;
vertical-align: middle;
display: inline-block; }
This solution depends on display: inline-block;, white-space: nowrap, and vertical-align: middle;. If you need help understanding any of what I've just posted, please feel free to ask.
On #image style add:
width: 30px;
margin: auto;
Related
Why first "display: inline-block;" div below that the second ?
I want two div in one line.
see example http://jsfiddle.net/ubo2bok9/
CSS code
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
}
.inConteiner {
width: 190px;
height: 30px;
background-color: #29e;
color: white;
margin: 2px;
}
HTML code
<div class="conteiner">
first
</div>
<div class="conteiner" id="BaseConteiner">
second
<div class="inConteiner">
<p> 111111111111111 </p>
</div>
<div class="inConteiner">
<p> 222222222222222 </p>
</div>
<div class="inConteiner">
<p> 333333333333333 </p>
</div>
</div>
You just need to set vertical-align:middle; to your .conteiner element because the text is being aligned with the elements in another container.
See the fiddle
Add a property float:left to your .conteiner
DEMO
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
float:left;
}
you could use like this
.conteiner {
display: table-cell;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
float:left;
}
for fixed width just use table-cell it will work fine.
add vertical-align:top; in .conteiner div
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
vertical-align:top;
}
DEMO
In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.
I'm pretty clueless as to:
how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="outer_border">
<div class="inner_border">
<!--just use a div to represent the image -->
<div class ="image">
</div>
<span class="upper_left_text">
upper left
</span>
<span class ="header">
<h2>
Header
</h2>
</span>
<span class="upper_right_text">
upper right
</span>
<button class="button1">Button</button>
<textarea class="text_area">Text Area</textarea>
<button class="button2">Button 2</button>
</div>
</div>
</body>
</html>
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
float: right;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
.button1 {
float: right;
}
.button2 {
float: right;
width: 80px;
height: 60px;
}
.text_area {
clear: both;
display: block;
width: 100%;
height: 150px;
margin: 5px;
/*I have no idea how to position this*/
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
I made a jsfiddle, check this one, should get you started :)
https://jsfiddle.net/fazbyxyq/
html5
<div class="right">
<div>upper left</div>
<div>header</div>
<div>upper right</div>
<div><textarea>textarea</textarea></div>
<div>button2</div>
</div>
css3
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.left{
float:left;
width:10%;
height:100px;
border:1px solid #000;
}
.right{
float:left;
width:89%;
margin-left:1%;
}
.right div{
float:left;
width:33%;
border:1px solid #000;
}
.right div:nth-child(2){
text-align:center;
}
.right div:nth-child(3){
text-align:right;
}
.right div:nth-child(4),.right div:nth-child(5){
width:99%;
border:0;
}
.right div:nth-child(4) textarea{
width:100%;
height:100px;
margin:10px 0;
}
.right div:nth-child(5){
text-align:right;
}
Peace out!
well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.
As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.
Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),
Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.
I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.
Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left
here you have the fiddle
The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:
<div id='demo'>
<div class='col1'>
<img src='http://www.placehold.it/50x100' />
</div>
<div class='col2'>
<div class='header'>
<span class='left'>left</span>
<span class='right'>
<button>button</button>
right
</span>
<h2>center</h2>
</div>
<textarea>Lorem ipsum</textarea>
<button>button</button>
</div>
</div>
to achieve the result in your image, you should add the following css:
#demo {
border: 2px solid black;
padding: 10px;
}
#demo .col1, #demo .col2 {
display: inline-block;
vertical-align: top;
}
#demo .col2 {
width: calc(100% - 60px);
}
#demo .left {
float: left;
}
#demo .right {
float: right;
}
#demo .header {
text-align: center;
}
#demo textarea {
width: 100%;
min-height: 100px;
margin: 8px 0;
}
#demo button {
float: right;
margin-left: 8px;
}
Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.
I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.
Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.
Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/
I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
}
#tall{
height:100%;
float:left;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
h2 {
display:inline;
}
.button1 {
float: right;
}
.button2 {
width: 80px;
height: 60px;
display: block;
float:right;
}
.text_area {
clear: both;
display: inline;
width:auto;
height: 150px;
margin-right: 0;
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
.text_area{
width:calc(100% - 70px);
}
I have tried the normal techniques for horizontally centering a div within a div. I must still be doing something wrong. Check out the following jsFiddle and help me center the depiction of a tank under the "Inner Level" heading. For convenience I have added a border to all the div tags.
jsFiddle Source
HTML:
<body>
<a href="#">
<div class="div-inline-block" style="text-align:left;width:150px;">
<h2>TEST</h2>
<p>A description</p>
</div>
<div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div>
<div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div>
<div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div>
<div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div>
</a>
</body>
CSS:
a{
text-decoration:none;
}
div{
border:1px solid red;
}
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
}
.tank-level-outer {
border:1px solid black;
width:25px;
height:32px;
display:table-cell;
vertical-align:bottom;
margin:0 auto;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
}
add this
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
margin:0 auto;
}
.tank-level-outer {
border: 1px solid black;
width: 25px;
height: 32px;
margin: 0 auto;
padding: 0;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
margin-top:7px;
display: table;
vertical-align: bottom;
}
Updated Fiddle
http://jsfiddle.net/czgoxafr/22/
Add this:
.tank-level-outer {
display: table;
margin: 0 auto;
}
change the css of div .tank-level-outer and add margin zero auto , remove display table-cell
.tank-level-outer {
border: 1px solid #000;
width: 25px;
height: 32px;
margin: 0px auto;
vertical-align: bottom;}
This works:
.tank-level-outer {
width:25px;
height:32px;
display:block; // not necessary since this class is applied to a div
vertical-align:bottom;
margin:0 auto;
}
try this:
//css
.firstDiv{
padding:25% 25% 25% 25%
height:400px;
width:400px;
background-color:red;
}
.secondDiv{
height:200px;
width:200px;
background-color:pink;
}
//html
<div class="firstDiv">
<div class="secondDiv">
</div>
</div>
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle