<div id="tagcontainer"><img id="tagimg" src="img/tri.png"/></div>
CSS:
#tagcontainer {
width:100%;
top:0;
position:absolute;
}
#tagimg {
position:relative;
margin:auto;
}
Not sure why I can't figure it out. Why is this image not centering?
Because <img> is an inline element. Use text-align: center on the container instead.
Add one more css property display:block;
#tagimg {
display:block;
position:relative;
margin:auto;
}
Try this:
#tagcontainer {
width:100%;
position:absolute;
}
#tagimg {
width:[imagewidth]px;
top:0;
position:relative;
margin:auto;
}
Either make #tagimg a block level element { display: inline-block; } or use text-align center on the parent...
Related
I made a div and used float:right in i but the float property is not working.
*Update: I found out that the reason the code isn't working is because of the display: inline-block that keeps the position of the div. How do I override the display?
#about{
display:inline-block;
}
#about-title{
text-align:center;
padding:15px;
color:white;
background:#774C60;
float:right;
}
Use it :
#about{
display:block;
}
or
#about{
width:100%;
}
I have 2 divs inside a container like this:
<div id="container">
<div id="first">Hello World</div>
<div id="second">I want to be at the top</div>
</div>
I want to align the first div below the second div without changing the HTML. How is this possible?
Here is my CSS:
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
height:200px;
}
#second {
float:left;
height:200px;
width:100%;
}
I am aware I can set position:fixed to #second and align it to the top but is there any other way to achieve this?
Here is a jsFiddle.
The height of the divs are depending on the content inside. The fixed height above is only for testing.
If you know the heights of the div's, you can use margin-top to solve this problem.
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
background:lightblue;
height:200px;
margin-top: 200px;
}
#second {
float:left;
height:200px;
width:100%;
background:yellow;
margin-top: -400px;
}
If you do not know the heights, you can use flexbox with the order property.
#container {
display: flex;
float:left;
width:100%;
flex-direction: column;
}
#first {
order: 2;
float:left;
width:100%;
background:lightblue;
}
#second {
order: 1;
float:left;
width:100%;
background:yellow;
}
As lyjackal mentioned in another answer, you can also use column-reverse instead of column, which reverses the elements. Choose what suits you the best.
you can use flex-box and reverse the column
#container {
float:left;
width:100%;
display:flex;
flex-direction: column-reverse;
}
fiddle
all can, but this is fixed height so modify you css
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
height:200px;
margin-top:200px;
}
#second {
float:left;
height:200px;
width:100%;
margin-top:-400px;
}
I've made this code for navigation bar.
HTML :
<div class="header-nav">
<div class="header">
<img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
</div>
<div class="nav" align="center">
Home
Gallery
</div>
</div>
CSS :
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
}
a {
display:inline-block;
width:50%;
height:42px;
float:left;
}
but the text in tag a is on top not in middle. how to make the text in a tag with display inline block to middle ?
Since you're using float rule vertical-align may not work in this case so You can provide margins to this like following:
a{
display:inline-block;
width:50%;
height:42px;
float:left;
margin: 10px 0; /* add this */
}
OR
If you want to use vertical-align then you need to adjust width accordingly
a{
display:inline-block;
width:20%; /* reduce width */
height:42px;
/*float:left; */ /* remove this */
margin: 10px 0; /* add this */
vertical-align:middle;/* add this */
}
Demo
Updated Demo
Do you mean to center "Home" in the block you've created?
Try in css with padding.
a{
display:inline-block;
width:50%;
height:42px;
float:left;
padding-top: 2px;
}
Play with that
Try vertical-align: middle;
More info. on vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Remove float and use vertical-align:
a{
display:inline-block;
width:50%;
height:42px;
vertical-align: middle;
}
Do it like this:
1) Keep your HTML as is.
2) Change your CSS as follows:
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
vertical-align:50%;
display:flex;
align-items:center
}
a {
width:50%;
float:left;
}
See fiddle here
You can try giving padding for the <a> tag
CSS:
a{
padding:10px 0;
display:inline-block;
width:50%;
height:42px;
float:left;
}
See the fiddle:
http://jsfiddle.net/xpfsyds2/
Add the following to your 'a' style:
line-height: 42px;
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I want to have a simple HTML layout with several <li> elements inline, each of which has a height:100%
I have used the following CSS trick to accomplish this:
position:absolute;
top:0;
bottom:0;
See my JSFiddle for an example.
For reasons outside the scope of this question, I desire to NOT have my <li> elements positioned absolutely. Can someone chime in on how to achieve this same layout with position:relative; or position:static; <li> elements?
Try this jsFiddle example.
The <li> elements are floated left and use the display:inline-block rule to get the proper height and width. Floating also removes the need for the rules; li.one { left:0; }
li.two { left:33%; } li.three { left:66%; }
html, body {
height:100%;
margin:0;
padding:0;
}
ul {
/* width:100%; */
/* height:500px; */
margin:0;
padding:0;
list-style:none;
height:100%;
}
li {
display:inline-block;
height:100%;
background:#333;
color:white;
width:33%;
float:left;
}
li:nth-child(even) {
background:#666;
}