Hi I have a container in witch there will be added multipe elements so I don't really know what the width of the container will be because the elements are added dynamicly.I need this container to be centered so I figure that I should use display:inline-block to make the div width and height to be set acording to it's elements but after I use this the property margin:0 auto does not work anymore.This is a simple example of what I am trying to achive:
<div>
<ul>
<li>All</li>
<li>Web Design</li>
</ul>
</div>
div{
display:inline-block;
margin:0 auto;
}
No matter how many elements are in that container I want it to be centered.My curent atempt does not work so how can I center this container?
You can do it by adding a wrapper div that has display block and setting text-align:center to it:
<div id="wrapper">
<div>
<ul>
<li>All</li>
<li>Web Design</li>
</ul>
</div>
</div>
div#wrapper{
text-align:center;
display:block;
}
div{
display:inline-block;
margin:0 auto;
}
see this fiddle.
Add text-align: center to the CSS.
div{
display:inline-block;
margin:0 auto;
text-align: center
}
Related
My question is related to CSS overflow-y:visible, overflow-x:scroll
but I am still not able to solve my problem. I want a scrollable sidebar on y-axis with a visible tag hanging on the x-axis.
My HTML setup:
<div>
<ul>
<li>
</li>
<li>
<div> ... //want it to be visible x
</div>
</li>
</ul>
</div>
CSS:
I tried to use this:
.div { overflow-y:scroll; overflow-x:visible; }
.li { position:relative; }
.div { position:absolute; top:0px; left:-100px; display:inline-block; }
Generally if you want the to view the scroll in the div you should use
overflow-x:scroll;
Please make sure to add a class otherwise the scroll will appear in the outer div too, Or use the hierarchy.
div ul li div{ overflow-x:scroll }
.my-div-scroll{ overflow-x:scroll }
I am using asp.net. I want to show the content of the div in the middle. but it showing the content in the top. my Div Is as follows:
<div style=" height:100px; width:100px; float:left; background:#666666;">
<span>about us</span>
</div>
How can i show the content in the middle. I have used Margin and padding but it shows the result in the whole div not the content. How can i do this please help i am new to asp.net.
thank you
You need to change the display of div to table-cell, and then you can use vertical-align property as given
<div style=" height:100px; width:100px; float:left; background:#666666; display: table-cell; vertical-align: middle">
<span>about us</span>
</div>
check it
Try this:
<div style=" height:100px; width:100px; float:left; background:#666666;text-align:center">
<span>about us</span>
</div>
If you want to align it horizontally, Bibhu's answer will do.
To align it vertically in the middle, add this to your style:
line-height: 100px;
vertical-align: middle;
Just remove float:left and add text-align property and line-height property.
<div style=" height:100px; width:100px;background:#666666;text-align:center;line-height:100px;">
<span >about us</span>
</div>
Try this:
height:100px; width:100px; background:#666666; line-height:100px;
Refer - how to align text vertical center in div with css
It explains how to centralize text beautifully with many demos.
I'm having trouble centering these buttons on a page. I just know it's something stupid I missed, but I can't figure out what. Here's the page:
<div id="page1">
<ul id="choiceBtns">
<li>All Time</li>
<li>Last 2 Weeks</li>
<li>Last Year</li>
</ul>
</div>
Here is the CSS:
#choiceBtns li{
display:inline !important;
border:solid;
padding:3px;
}
#choiceBtns {
margin:10px;
margin-left: auto ;
margin-right: auto ;
}
Start by modifying the CSS as follows:
#choiceBtns {
margin:10px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
}
Since your li child elements are inline, they will center within the width of the parent block, which in your case, is also the width of the page.
You may get slightly better control if you apply display: inline-block to the li elements if you need to add vertical padding and so on.
Finally, you don't need the !important declaration.
I am having issues to expand the div naturally like this:
I am not allowed to use percentages. I have tried to use them, but as soon as other items go between them, the second block goes down.
HTML code:
<div class="block1">
<ul>
<li>item long</li>
<li>item small</li>
<li>item sample</li>
</ul>
</div>
<div class="block2">
<a>This is a nice sample text</a>
</div>
CSS code:
.block2{
float:left;
border:1px solid blue;
}
.block1{
float:left;
border:1px solid red;
}
Here is my Fiddle
Replace float:left by overflow:hidden in .block2.
Fiddle
overflow:hidden is a little trick to trigger block formatting layout, so that the .block2 div sits at the side of the floated div. You can read more about block formatting contexts in this YUI article.
Lalalal, I am going insane with the CSS...
I can't achieve the simplest layout here, something is breaking.
I want 2 columns next to each other:
[**** 300px ****][******** 500 px ********]
2nd column heading
Some text.. - 1st bullet point text
- 2nd bullet...
- 3rd...
-------------------------
I have these divs:
<div class="faq_item">
<div class="faq_link">
Video/screenshot coming soon..
</div>
<div>
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
<hr/>
</div>
And the CSS:
.faq_item strong {
display:block;
margin-bottom: 10px;
}
.faq_item span {
display: block;
}
.faq_item {
margin:0 0 30px 50px;
}
.faq_item div {
display:inline-block;
}
.faq_link {
width:300px;
}
div.faq_item hr {
width:500px;
float:right;
clear:left;
}
My problem is that 1st div inside sits on top of the 2nd div when the code is at it is now. Once I eliminate the longest "li" tags, the whole div aligns properly (2 divs inside are next to each other). I don't understand why don't "li" wraps as it should normally and with 2 divs as inline-block they should be next to each other and not stacked vertically.
Please advise. Thank you!
Try putting your content inside a table.
It Worked for me.
Here's resource with perfect 2column CSS layout (and bunch others) Generally, you have to get floating right
Here you go:
<style type="text/css">
.wrapper {
width:800px;
margin:0;
padding:0;
}
.faq-link {
width:300px;
background:#DDD;
}
.faq-list {
width:500px;
}
.left {
float:left;
}
.right {
float:right;
}
</style>
<div class="wrapper">
<div class="left faq-link">
Video/screenshot coming soon..
</div>
<div class="right faq-list">
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
</div>
There are a couple of traps here. Padding will screw everything up, so you have to account for it in the padded class (i.e. padding:0 10px; adds a total of 20 pixels to the width, so if .faq-link had padding:0 10px; declared, the width would be 280px). Also, anything placed below these floated columns will need the clear:both css property.
Another method would be to drop your 2 divs in a container, then use margin to position the text where needed.
Example:
<div class="faq_container">
<div class="faq_link">
...
</div>
<div class="faq_item">
...
</div>
</div>
with css:
.faq_container{
width:800px;
}
.faq_item{
width:800px;
margin: 0 0 30px 350px;
}
.faq_link {
width:300px;
float: left;
}
This simply means the content div ignores the link div to the left, with the added bonus, that if you need something else on the right hand side you can simply float it there and edit the margins of the conent div to allow it to fit.
I created a fiddle for this - http://jsfiddle.net/vJYxt/
Let me know if this works for you.