I set margin 0 auto so why it dosen't work?
here is the fiddle: http://jsfiddle.net/g53a3/
.main_logo {
float: left;
width: 157px;
height: 123px;
border: 1px solid #b4b4b4;
}
.app-thumb-image {
margin: 0 auto;
width: 124px;
height: 97px;
background-color: #000;
}
Make the image as display:block; or wrap the image with another div and add image classs to that div.
.app-thumb-image {
margin: 0 auto;
width: 124px;
height: 97px;
display:block;
background-color: #000;
}
DEMO
For horizontal center: Display image as block element, like :
display:block;
For both horizontal and vertical center: you can use position: absolute - it is one of many ways to center it:
add to parent:
position: relative;
and for a child:
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
http://jsfiddle.net/g53a3/7/
Two options:
Apply display: block; to image and then margin: 0 auto; will do the trick (solution for block elements)
Apply text-align: center; to images's parent div and you are ok too (solution for inline elements)
both work great, but image is an inline element by default so probably the second solution is the most common.
You can use position:absolute to make it absolute center
Working Demo
CSS
.main_logo {
float: left;
width: 157px;
height: 123px;
border: 1px solid #b4b4b4;
position:relative;
}
.app-thumb-image {
margin: 0 auto;
width: 124px;
height: 97px;
background-color: #000;
position:absolute;
right:0;
left:0;
bottom:0;
top:0;
margin: auto;
}
For margin specify 13px instead of 0 and add display:block property, see below
.app-thumb-image {
margin:13px auto;
width: 124px;
height: 97px;
display:block;
background-color: #000;
}
http://jsfiddle.net/g53a3/5/
Here is how I got 13px -- (main_logo height - app-thumb-image height)/2 ie (123-97)/2=13
Related
I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?
Here is a picture
fiddle
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
.i {
width: 80px;
height: 80px;
border-radius: 50%;
}
.headingText {
color: white;
background: black;
display: inline-block;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
You could try something like this:
.header
{
padding-top:26px;
padding-left:40px;
position:relative;
}
.i
{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:0;
left:0;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
Using pseudo-classes and absolute positioning you can get the effect you want.
The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.
You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.
.header {
position: relative;
display: inline-block;
margin: 30px;
overflow: visible;
}
.header img.i {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
bottom: 16px;
left: -40px;
z-index: 1;
overflow: hidden;
border: 3px solid black;
}
.header p.headingText {
padding: 16px 32px 16px 80px;
color: black;
border: 3px solid black;
}
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
<p class="headingText">Hello</p>
</div>
Just add position: absolute in i class then control the margin of headingtext:
HTML:
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
CSS:
.i
{
width:80px;
height:80px;
border-radius:50%;
position: absolute;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin: 40px 0 0 37px;
}
FIDDLE
use a block element instead with a negative margin to the top (half circle size - half of the padding) and a margin to the left (half circle size). Just change:
.headingText {
/*display: inline-block;*/
display: block;
margin-top: -45px;
margin-left: 40px;
}
Example fiddle: https://jsfiddle.net/c67dchhv/
just simple make .header class position:relative; if you want to define any height and width you can, .i class position:absolute; give margin on .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe it will helpful for you.
I have been trying and I don't really know how to solve this:
I need to style the title of the content like this:
Now, I've been trying to have position:absolute some other stuff, but it just doesn't seem to work.
My code:
<div class="content_item">
<div class="double_line"></div>
<h2>Ce facem</h2>
</div>
css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
}
So what I wanted was to put the text over the line and a white background on the text.
fiddle: http://jsfiddle.net/Qu849/
Can you please help me?
This fiddle kinda works:
http://jsfiddle.net/Qu849/4/
Anyway I wouldn't do that code for this purpose. Consider this:
Just use a div with a background image (repeat-x) with those "borders"
Inside that div use a span, centered, and with a background:#fff;
That is just better.
EDIT
Check #drip answer to do what I described: https://stackoverflow.com/a/20070686/2600397
You need to position you h2 above your bordered div. My idea would be to make h2 display:inline-block; so you can use text-align:center; on the parent to center the child h2 and then just use position:relative; and top:-20px; on the h2 to move it up a bit
.content_item{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position:relative;
text-align:center;
margin-top:50px;
}
.content_item > h2{
text-align: center;
background-color: white;
padding:3px 15px;
font-size:14px;
display:inline-block;
position:relative;
top:-20px;
}
http://jsfiddle.net/Qu849/8/
Since the double_line div is absolutely positioned, it will be above any none positioned elements.
to put both elements on a relative plane, you need to position the h2 in the same manner (either absolute, or relative).
After that you can play with the margins or top/left properties of the elements to position them over each other.
You can do it with a backgruund image very easy.
If you are ok with using background images.
HTML:
<h2><span>Ce facem</span></h2>
CSS:
h2 {
background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center;
text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }
Demo
Or if you really prefer usin bordered element:
Then with a little tweaks in the css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position: absolute;
top: 12px;
}
.content_item>h2{
display: inline;
position: relative;
z-index: 2;
text-align: center;
padding: 0 10px;
background-color: #ffffff;
}
.content_item{
text-align: center;
position:relative;
}
Demo
Yes, Rodik is right
Try using:
.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}
You have to give position:absolute; and margin to your <h2>
Replace your <h2> style with this:
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin:-10px 41% 0px;
}
fiddle
if in doubt, you could just make the text an image with full transparent background, this makes it easier when it comes to responsive webpage layouts (different resolutions etc.)
Pure Css with No images
Ammend this in your CSS to check if it helps :
.content_item>h2{
text-align: center;
background-color: #ffffff;
display:inline-block; // makes header size equal to text width
width : 30%; //gives indented left-right white-space
position:absolute; //to overlay it on double-line
top : 0px; //position
display: table; //centre inline elements
margin : 0 auto;
margin-left : 40% //hack to center it
}
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
}
.content_item>h2{
background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
}
.content_item{
position:relative;
}
}
use this code usefull for you.
see this link http://jsfiddle.net/bipin_kumar/35T7S/1/
Here is one way of doing it:
.content_item {
position:relative;
}
.content_item > div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
XXdisplay:inline-block; /* not needed */
width:100%;
height:5px;
position: absolute;
z-index: -1;
top: 50%;
margin-top: -3px;
}
.content_item > h2 {
text-align: center;
background-color: #ffffff;
width: 200px; /* must be specified */
margin: 0 auto; /* for centering */
}
To the .double-line div, add z-index: -1 to force it to be painted under the h2 element.
Use top: 50% and a negative margin-top: -3px to vertically align the double lines (if that is what you need).
You then need to specified a width for h2 other wise it will be 100% wide and the white background will paint over the dobule-lines. Add margin: 0 auto to center the h2 within the parent container.
You do not need display: inline-block for the .double-line since the absolute positioning will force the display type to be block.
Demo at: http://jsfiddle.net/audetwebdesign/nB2a3/
You can do this without absolute positioning and without changing the HTML.
Rather than having the text-align: center on the <h2>, you can set it on the .content-item. Then use display: inline-block on the <h2> and relatively position it with a negative top value.
Like so:
.content_item>div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
}
.content_item>h2 {
background-color: #ffffff;
display: inline-block;
margin: 0;
padding: 0 40px;
position: relative;
top: -15px;
}
.content_item {
text-align: center;
}
http://jsfiddle.net/Qu849/11/
Try this, another way
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin-top:-30px;
margin-left:50%;
}
When z-index not used this type of issue, use above format.
tried text-align center and margin auto, both doesn't work and I do not want to used to use the 'margin hack' for centering..
http://jsfiddle.net/st9AM/1/
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
First of all, using margin: auto; is not a hack
And to center your circle inside the circle, you can use positioning techniques, like position: absolute;. Here, I am using position: absolute; on the inner circle, than am assigning top and left properties with a value of 50% and than am using margin-top and margin-left and deducting 1/2 of the height and width.
Why am deducting 32px? As I already said am deducting exactly half the total width and height so this also includes the border of your element which is set to 2px which makes your element 64px in height and width respectively.
To vertical-align the + symbol, am using line-height property as I can only see a single character to be vertically aligned(you didn't said but technically I can assume what shape are you looking for), alternatively you can also use vertical-align: middle; but you need to set the container element to display: table-cell;
Demo
Last but not the least, you should nest the span tag inside the inner circle div.
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -31px;
left: 50%;
margin-left: -31px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
Here's a cleaner solution.
with one HTML element only.
HTML:
<div class='circle'></div>
CSS:
*
{
margin: 0;
padding: 0;
}
.circle, .circle:after
{
border-radius: 50%;
border: 2px solid #DDD;
text-align: center;
}
.circle
{
width: 120px;
height: 120px;
font-size: 0;
}
.circle:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circle:after
{
content:'+';
font-size: 20px;
padding: 20px 0; /* 2*padding + font size = innerCircle height*/
display: inline-block;
vertical-align: middle;
width: 50%;
}
You had "float: left" in the inner circle, which you didn't need
//float: left;
Working fiddle
remove float left and use margin: 0 auto;
.circle{
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
margin:0 auto;
}
Have a look at this fiddle. You wrote float:left; and wanted to center the image. Remove the float:left; and it works fine.
Current browsers (May-22) work with this (replace 261px and 165x by 50% of your image size... mine is 522px x 330px ):
{
position:absolute;
left: calc( 50% - 261px );
top: calc( 50% - 165px );
}
im using this css code:
/* status update page style */
#content_wrapper {
display: inline;
width: 80%;
padding: 0;
margin: 0 auto;
}
#content_update {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
display: block;
float: right;
width: 230px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* FOOTER */
#footer {
width:100%;
height:580px;
position:absolute;
bottom:0;
left:0;
border-top:4px solid #ed1c24;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
but the divs are displaying behind the footer divs. i have created a fiddle here so you can see the html too - http://jsfiddle.net/wmrhC/
It's because you have set the footer div to be absolutely positioned at the bottom of the browser window with a height of 580px. This takes the div out of the regular document flow, which means other elements can start hiding behind it, and since it is 580px high, most other elements on the page will hide behind it. You could fix this by setting the z-index on the footer to -1, but that's probably not what you are after, as it would just mean that the div's will start floating over the top of the footer instead of behind the footer, and that still doesn't look pretty.
You should get rid of the absolute positioning which you have set currently, and maybe look at something like CSS sticky footer for an approach which will let you set a footer which sticks to the bottom of the page instead of to the bottom of the browser window.
When working with position: absolute or fixed you should always be aware that these elements can cover other parts of your site, and you have to manage their depth manually
You can do this using the z-index property.
Let's say that you would like that the footer part appears below all contents.
You could add the z-index property like this:
#footer {
/* other styles */
z-index: -1;
}
See it in action
Though note, that this only fixes the "content is displayed behind" problem. But looking at your page you have more positioning problems to solve.
As stated in other answers, it's because you've positioned your footer div to be fixed.
Something along this line (regarding HTML and CSS) should help for your page lay-out:
JSFiddle demo
This is the CSS (see the JS Fiddle for the full code):
...
.wrapper {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
background-color: #cccccc
}
.left1 {
position: relative;
float: left;
left: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.left2 {
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
background-color: #ccccff
}
.right {
position: relative;
float: right;
right: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.footer {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
margin: 10px 0px;
background-color: #cfcfcf
}
...
As you can see, none of these items are positioned absolute or fixed.
Be sure to check this link too, which explains how you can create a sticky footer:
CSS Sticky footer (As indicated by another answer).
I have icon, which on click adds new div's (columns) to div container. The problem is that when new div's (columns) appears the button doesn't shift right. Is it possible to somehow add position:fixed only inside the div?
Here is a few screens of what I have
And some code
<div id="grid">
<div id="add-col"></div>
<div class="clear"></div>
<div id="squares"></div>
</div>
#grid{
width:710px;
height: 470px;
border:1px dotted #dddddd;
display: none;
margin: 5px auto;
padding: 5px;
text-align:center;
overflow: auto;
}
#add-col{
margin:5px;
float:right;
background-image: url(images/table-add-column-icon.png);
width: 32px;
height: 32px;
cursor: pointer;
}
Your CSS would look like this :
#grid{
width:710px;
height: 470px;
border:1px dotted #dddddd;
display: none;
margin: 5px auto;
padding: 5px;
text-align:center;
overflow: auto;
position:relative; //added
}
#add-col{
margin:5px;
background-image: url(images/table-add-column-icon.png);
width: 32px;
height: 32px;
cursor: pointer;
position:absolute; //added
top:5px; //added
right:5px; //added
}
With position absolute you can place a button in a corner without having it to move from that position ever again.
To use a position you need to place position:relative; to its parent, else it will fly around the page.
Note: float has been deleted from #add-col