I am trying to center a triangle in the exact center of a div, but i cant do it.
It positions itself in the middle of the div but just on horizontal alignment not vertical
.I made the margin: 0 auto; but still doesn't work.I have also tried display: table;
margin: 0 auto; on the inner div giving a margin: 0 auto; to outside div ,yet nothing.I also tried with display: inline-block; and no result. And i don't know why! Does someone have any idea?
My simple code is :
jsfiddle.net/
There are few options.
My favourite is to give outer div an absolute position, give the inner one a relative position and then use top:50% to position vertically. You also need to add a negative margin of half the height of the triangle because top:50% will centre the top of the triangle not the middle of it.
#main_content {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
}
#container {
width: 0px;
height: 0px;
border-style: solid;
border-width: 25px 43.3px 25px 0;
border-color: transparent #007bff transparent transparent;
position: relative;
top:50%;
margin: -21.65px auto; //Half the height of your triangle
}
You can set display:table-cell of main_content and then use vertical-align: middle;
#main_content {
width: 300px;
height: 300px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
Related
OK, I've gotten the prelim version of my page started, but I'm having a problem with two floated div's that are wrap in header tag. Basically, I want the two rectangles to center within the containing div tag. One of the rectangles overlaps the other. I had to us positioning to be able to expand them within the container other-wise the second would jump below the first.
Here's what I've have so far.
<div id="div1" class="fluid">
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity."
</div>
Here is the css for the page - I have a follow-up question after we get this solved.
.gridContainer.clearfix #headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
}
.gridContainer.clearfix #headGraphics #headRectangle1 {
float: left;
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.gridContainer.clearfix #headGraphics #headRectangle2 {
background-color: #FFAAAA;
float: left;
/*margin-right: 50px;*/
width: 350px;
height: 75px;
position: relative;
top: -50px;
right: 0px;
text-align: center;
clear: both;
left: 100px;
margin-left: auto;
margin-right: auto;
display: block;
}
.gridContainer.clearfix #headGraphics:after {
content: " ";
display: table;
clear: both;
}
I can't remove the position tags because they give me the layout that I'm am trying to accomplish.
Let ma know if you need more info. Thank you in advance. And yes, I have searched this page and others to find a solution, but none seem to apply to my particular situation.
let me clear a few things up... and before I go any further, most of my (98%) selectors are in the boiler plate template. That being said, here the computed effects per selector:
.gridContainer.clearfix #headGraphics;
width 950px, margin 0 auto, font-family monotype weight 800px size 20px, text-align center.
.gridContainer.clearfix #headGraphics #headRectangle1;
width 350px, height 75px, display inline-block, margin rt & lft auto, position relative, box-shadow (which isn't working properly)
.gridContainer.clearfix #headGraphics #headRectangle2
width 350px, height 75px, display inline-block, position relative, top -50px, rt 0px, bot 0px, left 100px (this is to bring object up and offset from rectangle), float left, clear both, text-aligh center.
I would suggest removing the float attributes from both, then just setting both items display as inline-block, you will need to specify width and height on both cases, then apply text-align center to the parent, that will allow the child to be centered to the parents available area.
The Display: inline-block will give the two elements the possibility to behave not just like a block element, it will be both, block and inline, so you will be able to use attributes for both at the same time.
If you need an example, I can provide you with one, Just let me know!
EDIT...
Here is a working example
My JSFiddle
http://jsfiddle.net/dq185dw9/
My CSS
#headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
outline: red dashed 1px;
padding: 35px; /* remove or change if needed */
}
#headGraphics [id*="headRectangle"] {
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
margin: 0px 25px;
line-height: 75px; /* remove or change if you want to have more than one line of text */
}
My HTML
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>
I was asked to code an unusual shape background on some centered text.
The text should be centered and have it's background extend to the right edge of the content-box.
How can I do this with CSS?
http://jsfiddle.net/7U688/
The text centering is cake.
The tricky bit is extending the background off into one direction.
This is one way of accomplishing this:
#outer{
border:2px solid black;
background-color:red;
overflow:hidden;
}
#inner{
margin:40px;
text-align:center;
}
p{
display:inline-block;
color:white;
background-color:black; // or an image
margin:0 -999em 0 5px;
padding: 5px 999em 5px 5px;
line-height:1;
}
In this case - I use a huge padding and an equally huge negative margin to keep an element in flow, but visually extend outside of its borders. A benefit of this technique is that it allows the dev to keep an element in normal static or relative position.
Finally, use overflow:hidden in a parent element to prevent unwanted bleed.
Using :after, you may do something like THIS.
This allows the text to be centered normally without using margin and padding hacks.
p {
display: table;
background: black;
margin: auto;
color: white;
position: relative;
font-size: 1em;
}
p:after {
content: '';
background: black;
width: 150px;
line-height: 1em;
height: 100%;
display: inline-block;
position: absolute;
}
Is this what you want? Fiddle
Html:
<div class="wrapper">
<span class="text">You text</span>
</div>
Css:
.wrapper {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.text {
background: yellow;
}
I have a border, which fits 100% width of container div. What I want to do - add background (or img tag) in center of that border, like in example:
http://www.part.lt/img/8a22897d62de874896a3b62107032bd3507.gif
(The "+" is image and line from left and right must be border). White space must be padding or margin from border.
How can I do this?
What I have tried:
JSFiddle
<div class="full-border">
<div class="full-border-cross"></div>
</div>
.full-border {
border-bottom: 1px solid rgb(204,204,204);
padding: 13px 0;
position: relative;
}
.full-border-cross {
background: #fff url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center;
position: absolute;
width: 100%;
height: 100%; padding: 0 13px;
}
Does the white space "have" to be padding? or can you just assign it a certain width?
I've updated your fiddle with this code:
.full-border-cross {
background: url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center #fff;
position: absolute;
left: 50%;
width: 40px;
height: 100%;
}
Here: http://jsfiddle.net/WHVbc/17/
I have updated your requirement below and also available in the following fiddle. Refer that...
Here: http://jsfiddle.net/wRa8n/
<div class="full-border"></div>
<div class="full-border-cross"></div>
<div class="full-border"></div>
.full-border {
border-bottom: 1px solid #CCCCCC;
display: inline-block;
margin: 0 16px;
padding: 0;
width: 200px;
}
.full-border-cross {
background: url("http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: auto;
padding-top: 13px;
width: 15px;
}
I'm trying to add a triangle before a div using css, but it ends up under it.
http://jsfiddle.net/lasseedsvik/LwE7u/
HTML
<div id="container">
1234
<div id="toolbar">
Want silly triangle before this div to left
</div>
</div>
CSS
#container {
width: 500px;
}
#toolbar:before
{
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
}
Is there something missing like display: inline or something?
Use CSS Positioning to set the triangle correctly, in the example below, I am using position: relative; on the parent element, and than use position: absolute; for the :before pseudo..and than use left property which is dobule of the elements width
Always you should wrap the absolute positioned elements with a relative positioned containers, else your element will fly out in the wild.
Demo
#container {
width: 500px;
}
#toolbar:before {
position: absolute;
left: -88px; /* Double the element size */
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
position: relative;
}
Note: Generally when you are creating triangles using CSS, it's a
common practice to set the elements height and width to 0 so if
you want, just tweak them up.
Try putting your div#toolbar in position:relative and positionning your pseudo-element in an absolute manner. Then adjust position and margins to position it correctly.
http://jsfiddle.net/LwE7u/2/
I've looked at several other posts on vertically aligning divs but the solutions I'm finding don't seem to be working for my use case. I'd like to vertically center the div with the class "I-want-to-center-this-while-ignoring-the-other-two-divs".
I have a very simple example on jsfiddle here.
Can anyone help me out with this?
Code:
HTML:
<div id="container">
<div class="I-want-to-ignore-this"></div>
<div class="I-want-to-ignore-this float-right"></div>
<div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
</div>
CSS:
#container {
height: 300px;
width: 100%;
border: 2px solid black;
}
.I-want-to-ignore-this{
float:left;
height: 75px;
width: 100px;
border: 2px solid grey;
}
.float-right {
float: right;
}
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
vertical-align: center;
}
In the comment section you specified that your container will be fixed height. The simplest solution is to just make the position of the center div relative and move it down toward the center of the box with the "top" CSS attribute.
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
position:relative;
top:70px;
margin: auto;
vertical-align: center;
}
Here is the updated JSFiddle.
(NOTE: If your container changes size you would need to update the variable; but being fixed this solution should work fine)
I would simply add a top margin to your center div:
.I-want-to-center-this-while-ignoring-the-other-two-divs {
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
margin-top: 73px;
}
Since you have a fixed height on your parent container and your div has known height, this is the simplest way of doing it.
The math is: ( parent-height - (child-height+top-border+bottom-border) ) / 2
http://jsfiddle.net/audetwebdesign/7SfKW/10/
Add this to center div css:
position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;
Remove margin from there
Add this to container:
position:relative;
Edit: JSFiddle
.I-want-to-center-this-while-ignoring-the-other-two-divs{
position:relative;
top:25%;
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
}
check this: JSFIDDLE
Your container is 300px height and the div you want to center is 150px. By applying simple math to center the div you need pad 50px above and 50px below to center the div. so top:25% would do that.
Just add position and top property to your css as shown above