I've a div with only a min-width that extends itself like it is 100% width.
Inside it i have a link left floated and I'm going crazy finding a way to center it inside the div.
How can i do this without changin it's float?
Oh and the link hasn't a defined with
EDIT:
I've tried with:
I gave the container a text-align: center,
removed the float nad it gets centerd but not aligned with others element and i've tried using display: inline and vertical-align.
For the code i'm trying to center the "Project name" here http://twitter.github.com/bootstrap/examples/fluid.html
Hope this helps:
http://jsfiddle.net/cU2ff/
EDIT
http://jsfiddle.net/cU2ff/1/
I came up with this, don't know if it's gonna help. The float: left property doesn't do anything but I left it there
<div id='container'>
<a id='projectName' href='#'>Ciaoasdsa da sda sd asd adsa</a>
<ul id='menu'><li>li1</li><li>li2</li></ul>
<p id='login'><a>asd</a></p>
</div>
#container
{
width:100%;
position:relative;
overflow:hidden;
border: 1px solid black;
}
li { float: left; }
#menu, #login { border: 1px solid black; }
#menu{ float:left; }
#login { float:right; }
#projectName
{
text-align: center;
border:1px solid red;
padding:3px;
width: 100%;
position: absolute;
float: left;
}
EDIT
http://jsfiddle.net/cU2ff/2/
wrap it with a div and give it the id projectName
I usually used this too center my links within the div.
div.name a
{
margin-left:auto;
margin-right:auto;
}
Without being able to see the html you are talking about it is a little difficult to give you an answer, but try this if it is just text inside the link.
a{
display:block;
text-align:center;
width:100%;
}
Try to use this
a{
margin:0 auto;
}
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
Ok so first it's my firstquestion here on Stackoverflow and the first question ever at all...
I started learning web development two month ago and I learned HTML CSS and most of JS and some jQuery...
I never did any actual thing or experimented but now I'm trying to make my first project to start having practice..
So i've got this wrapper div and inside it I have two more divs, one is a kinda main content div and under it should be the other div which have a nice white img to blend with the overall website background.
The problem is that I cant get the second div to be under the main div and inside the wrapper div. I've simlified it here in the code... Please let me know how to do it...
Thanks and sorry if my English made you hit yourself in the face :)
The HTML
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
The CSS
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
Edit:
I've made a Pen on CodePen to show you what I mean better...
http://codepen.io/Avisaac/pen/DgIzi
This should be the resault only the gray div should be under the red div AND on the bottom of the red div, also i want the red div to be centered inside the wrapper. [plz notice that the wrapper should have the abillity to be centered also, as it is the main content area for my site which is centered.
I also attach a prtScr I took of my monitor to explain better:
the white square is the main content (meaning #first) the white gradient on the bottom is the second div (#second) which contains this gradient. the main content should be over the gradient so that the main content blend with the pattern background.. Hope I made it clearer
http://img841.imageshack.us/img841/2882/qg6j.jpg
The heights and widths don't match.
Try to add more to the wrapper's height, it's just 350px but if you add the two other div's height, it's 400px.
As #DevlshOne mentioned if your mean by under is overlapped try this:
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
position: relative;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
position: absolute;
top: 0; left: 0;
}
#second{
width:350px;
height:100px;
background-color: gray;
position: absolute;
top: 0; left: 0;
}
fiddle for this : here
But if your mean is one in top and other in bottom try this;
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
overflow: hidden /* or scroll or auto */
}
#first {
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
another fiddle for this one: here
I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?
JS Fiddle: http://jsfiddle.net/F6R9C/
HTML
<div>
<span>
Visit website
View project
</span>
</div>
CSS
div { background:red;overflow:hidden }
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}
Another option would be to give the span display: table; and center it via margin: 0 auto;
span {
display: table;
margin: 0 auto;
}
One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):
div {
background: red;
overflow: hidden;
text-align: center;
}
span a {
background: #222;
color: #fff;
display: inline-block;
/* float:left; remove */
margin: 10px 10px 0 0;
padding: 5px 10px
}
http://jsfiddle.net/Adrift/cePe3/
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
Applying inline-block to the element that is to be centered and applying text-align:center to the parent block did the trick for me.
Works even on <span> tags.
Spans can get a bit tricky to deal with. if you set the width of teach span you can use
margin: 0 auto;
to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.
Here is the jsfiddle I cam e up with off the top of my head: jsFiddle
EDIT:
Adrift's answer is the easiest solution :)
only css div you can center content
div{
display:table;
margin:0 auto;
}
http://jsfiddle.net/4q2r69te/1/
I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:
div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}
I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.
I want to center an image and its title inside a div with this css code
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.
Remove unnecessary CSS and use the following CSS:
.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
margin-right:2%;
display:inline;
}
DEMO
You need to make .title class display: table-cell;
.title{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
Fiddle
Note: Table-cell doesn't work in Old IE browsers
use text-align with your div having class title as
text-align: center;
check this fiddle http://jsfiddle.net/7kx4r/4/
something like this?
http://jsfiddle.net/7kx4r/8/
just add width:XXXpx; margin:0 auto;
Try it with this CSS:
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
position:relative;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
position:absolute;
top:50%;
margin-top: -8px;
}
What's going on here:
position:relative creates a new offset context for .box's children.
position:absolute tells .titleIkon to use offset parameters (left, right, top, bottom) relative to .box
top:50% tells .titleIkon that it should consider it's top edge position to be 50% of the height of the parent.
margin-top: -8px tells the browser to move the image up by half it's height (16px / 2 = 8px)
just define display:table-cell; vertical-align:middle; to your .title class.
its work IE8 to IE 10
see the dmeo - http://jsfiddle.net/7kx4r/10/
Hope you want this.
give text-align: center if you want only the pink line to be in center.http://jsfiddle.net/7kx4r/17/