This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 8 years ago.
I have a very simple layout that I am trying to achieve in CSS, but I am not having any luck. All I want to do is (horizontally) center a div that contains a link. The size of the div should be based on the size of its content.
I have tried a bunch of combinations of auto margins, text alignments, and display types, but can't seem to figure it out (I am a CSS noob). I have cooked up a very simple case (and the best I can do)
HTML:
<body>
<div class="myDiv">
google.com
</div>
</body>
CSS:
.myDiv
{
background:lightblue;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.myDiv a
{
text-decoration:none;
}
I have made a Fiddle as well. Is this type of layout possible without complicated HTML/CSS /hacks?
You just can do this:
.myDiv
{
display:table;
margin:auto;
}
View the demo http://jsfiddle.net/VvL6M/9/
Why not just apply the styles to the anchor tag itself;
Fiddle
.myDiv {
text-align:center;
}
.myDiv a {
text-decoration:none;
background:lightblue;
padding: 5px;
}
How about this:
#container
{
text-align:center;
}
.myDiv
{
background:lightblue;
display:inline;
}
.myDiv a
{
text-decoration:none;
}
And:
<body>
<div id="container">
<div class="myDiv">
google.com
</div>
</div>
</body>
Check out this JFiddle: http://jsfiddle.net/VvL6M/11/
Related
I'm creating a simple banner for a website using Bootstrap CSS and after centering text within the banner, I would like a button to be displayed inline with it. However, after I create the button, it does not display inline with the centered text within the button.
HTML:
<div id="idea_banner">
<div class="container">
<b>Got an idea? Tell us about it!</b>
Give us an idea
</div>
</div>
CSS:
#idea_banner {
background: #4B91FB;
overflow:hidden;
width:100%;
height:90px;
}
.container {
position:relative;
}
.container b {
display:block;
text-align:center;
margin-right:100px;
margin-top:35px;
color:#FFF;
font-size:22px;
white-space:nowrap;
}
.container a {
display:inline-block;
float:left;
}
I'm not really sure if this is a Bootstrap issue or not. Any help is greatly appreciated!
It was happening because you had displayed b as block in your CSS. Change it to inline to get it into a single line.
Also, remove float: left for .container a and add text-align: center for .container.
By the way, <b> tag is not recommended. If you need an element to wrap the text, use <p> instead.
Working Code Snippet:
#idea_banner {
background: #4B91FB;
overflow:hidden;
width:100%;
height:90px;
}
.container {
position:relative;
text-align: center;
}
.container b {
display: inline;
text-align:center;
margin-right:10px;
margin-top:35px;
color:#FFF;
font-size:22px;
white-space:nowrap;
}
.container a {
display:inline;
/*float:left;*/
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="idea_banner">
<div class="container">
<b>Got an idea? Tell us about it!</b>
Give us an idea
</div>
</div>
I have set up 2 div tags, the outer one with display:table and the inner one with display:table-cell. Inside these I have an image.
When I resize the box using jQuery UI's resizable() API, I am unable to shrink it smaller than the image.
Markup:
<div class="resizebox">
<div class="content">
<img src="http://placehold.it/300x60">
</div>
</div>
CSS:
.resizebox {
border:1px solid black;
height:100px;
width:320px;
overflow:hidden;
display:table;
}
.resizebox .content {
display:table-cell;
vertical-align: middle;
text-align: center;
}
jsFiddle
I've added another example under the top resizable box to demonstrate the kind of behavior I'm trying to achieve (while keeping the CSS Table)
You beat me to it. Just using regular 'ol width: 100%;
img {
width:100%;
}
Fiddle Example
Try adding the following css
.resizebox .content img {
width:100%;
max-width:100%;
}
JsFiddle
Feeling a big silly now.
Fixed this by adding these CSS Styles:
.resizebox img {
max-width:100%;
max-height:100%;
}
jsFiddle
I want to create a div which contains an image and text on it. Something similar to http://wearyoubelong.com/ How do I go about doing this? I am using Zerb Foundation Framework. As of now I have tried using position : absolute on the text, but that seems to break at a lot of places. Can you please advice me on how to go about this?
Let say you have a sample HTML like this
HTML
<div id="container">
<div id="content">
<h1>Here goes some content</h1>
<p>Description about the product.
Some more desription about the product.</p>
</div>
</div>
CSS
#container
{
background-image:url('http://image.made-in-china.com/2f0j00cZjaqNvWlEks/Men-T-Shirt.jpg');
background-repeat:no-repeat;
height:400px;
width:400px;
}
#content
{
position:absolute;
height:auto;
width:auto;
top:150px;
left:100px;
}
#content h1
{
color:Yellow;
font-weight:bold;
font-size:22px;
}
#content p
{
color:Red;
}
Just gave the main div #container a background-image , positioned div #content to absolute and then using top and left property float it according to your needs.
Live Demo
Hope this helps.
Edited to set #container div's height and width to auto
Updated Demo
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Rounding the sides of a big image contained in a small division not working in Chrome
What I'd like to do is have a 'vault' that opens when the user mouses over the inner wrap element. The problem I've run into is that (in Chrome at least) the 'doors' aren't being hidden under the border-radius area of the inner wrap element. Is there any CSS-only way to rectify this, or am I going to have to look at something a bit more complex?
HTML:
<div class="vault-wrap-1">
<div class="vault-wrap-2">
<div class="vault-door-1"></div>
<div class="vault-door-2"></div>
</div>
</div>
CSS:
div.vault-wrap-1 {
height:600px;
width:600px;
border-radius:9999px;
background:green;
margin:auto;
padding:30px;
}
div.vault-wrap-2 {
height:600px;
width:600px;
border-radius:9999px;
background:blue;
overflow:hidden;
}
div.vault-door-1, div.vault-door-2 {
height:600px;
width:300px;
background:red;
}
div.vault-door-1 {
float:left;
}
div.vault-door-2 {
float:right;
}
This seems to be a problem only in Webkit browsers when trying to round corners on positioned elements.
The solution, as shown in this answer, is to add a -webkit-mask-image to the element with the border-radius:
div.vault-door-1, div.vault-door-2 {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
Im creating a new website and i need to know something(will show with example).
Lets say i did this:
html;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
and css:
#center-in-bar {
list-style:none;
display:inline-block;
/*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}
What do I do to make all the li elements centered both horizontal and vertical? In the center-in-bar element?
Any help would be appriciated :))
Try this CSS snippet:
#center-in-bar ul {
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
#center-in-bar li {
...
display:inline; /* you might want to use this instead of "inline-block" */
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's another technique that utilizes relative and absolute positioning to simulate centered-middle position. This technique is not exact, but it should be compatible with any browser (even the early ones):
<style type="text/css">
#vertical{
position:absolute;
top:50%; /* adjust this as needed */
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Important note:
When this question gets asked someone always seems to suggest line-height as a solution, but I would implore you to steer clear of that suggestion. It looks good when you're demonstrating something simple like "Hello World," but line-height breaks horribly when the text wraps.
HOW TO HORIZONTALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
Let's say you wanted to center a document on a browser page, so that no matter how big you resize your browser the element is always centered:
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
write this HTML for centering something horizontally in between your body tags:
<body>
<div id="Content">I am a centered DIV</div>
</body>
This will horizontally center block level elements. To center text, spans, or other inline elements all you would need to add is:
#Content {
width:500px;
margin:0px auto;
text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
HOW TO VERTICALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
Note: Do not use line-height to vertically center elements, as it will only work for one line of text and nothing more.
As for vertically centering items, there are 3-5 methods you can use depending on what it is you are trying to center.
This site describes each method easily for you:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Best of luck!
You should give same value to line-height and height.
#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}
also look at this: Text align vertical within li