I am trying to put a margin in left and right of the rhombus but couldn't.
Basically I am styling < hr > in to a custom styled hr
Code:
<div class="container">
<hr class="square gold">
<p>some text</p>
</div>
Demo :http://jsfiddle.net/squidraj/03xw85w0/
Any help is highly appreciated. Thanks in advance.
Basically, you can't do this with an hr...you would have to use a span or some such other element.
Then you can follow the techniques as detailed in the linked question HERE.
body {
text-align: center;
}
.divider {
width: 70%;
margin: 20px auto;
overflow: hidden;
text-align: center;
line-height: 1.2em;
display: inline-block;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 1px solid black;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
<span class="divider">◊◊</span>
Related
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
I've got to center an image within a div-container with fixed sizes.
My first idea was: img is an inline-element. So you can use text-align: center. As with text.
But that doesn't work.
I've made this demo:
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
One can see: Text centering works perfectly. But image centering fails.
What did I do wrong here? Respectively: Which of my assumptions are wrong?
.wrap {
text-align: center;
}
use this
text-align affects the inline content of an element.
The image isn't the content of the <img>, it is the <img>.
For text-align to affect it, you must apply the property to the parent of the <img>.
hi img is inline eliment so you can not add text-align: center; to image
add parent div to check this
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Your .wrap class should have text-align: center
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Just add this to your CSS
img {
display: block;
margin: 0 auto;
}
Just add
margin: 0 auto;
display: block;
Thus it should be :
.wrap img {
border-radius: 12px;
margin: 0 auto;
display: block;
}
Or you can also add text-align:center to .wrap
Here is the fiddle:
Add style in wrap in class text-align: center;
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Hi I'm trying to center the text in the first circle div. I think it's currently in the center of the div but when there is more than one characters like '200', it looks funky as below. I have the red circle background and trying to make the text in the center regardless of the characters. thank you in advance!
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 10px;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>
Try to set width:100% on .bg .label as follows:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
EDIT: if you want to keep the same width for the circle and still center the text, you could replace width:10px; in .bg with the following:
.bg {
/* ... */
width: 35px;
padding: 10px 0;
text-align: center;
/* ... */
}
So the full snippet would look something like this:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
width: 35px;
padding: 10px 0;
text-align: center;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
Try something like this. I'm guessing you are ok with fixing the width and height of your little circles? If so, this solution should work for you. The benefit here is your circles stay consistent visually regardless of the values placed within them.
You can adjust the width/height of the circle to your liking, and whatever value you place in there will remain centered. Keep in mind, with this solution, your circles won't scale to match the value's length should it expand beyond their bounds. I assume this is the behavior you're looking for, though, given your original code.
Also, note, you might need to adjust the top margin to position the values according to the height of the circles if you change them. Hope this helps!
.bg {
background: red;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;
width: 38px;
height: 38px;
}
.bg .label {
display: inline-block;
margin: 9px auto 0;
text-align: center;
width: 38px;
}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?
I want to make a div grid with a bigger center div in the middle, but the small divs won't wrap properly. What must I change? I'm trying not to use tables because of bandwith and so on.
My HTML:
<div id="main">
<!-- a lot of .icon's here -->
<div class="icon"></div>
<div class="title"></div>
<div class="icon"></div>
<!-- a lot of .icon's here -->
</div>
My CSS:
#main {
display: inline-block;
margin: 5em 0 3em 0;
width: 66.2em;
height: 35.2em;
text-align: left;
overflow: hidden;
}
.icon {
background: #000;
height: 5em;
width: 5em;
margin: 0 0.2em 0.2em 0;
display: inline-block;
}
.title {
background: #777;
height: 10.2em;
width: 21.4em;
margin: 0 0.2em 0.2em 0;
display: inline-block;
}
Thanks in advance!
Here you go: Fiddle http://jsfiddle.net/fx62r/2/
inline-block leaves white-space between elements. I would use float: left; instead of inline block
Write elements on same line to avoid white-space. Like this:
<div class="icon"></div><div class="title"></div><div class="icon"></div>
And remove Margin:
.icon {
margin: 0 0.2em 0.2em 0; //Remove.
}
.title {
margin: 0 0.2em 0.2em 0; //Remove
}
#main {
display: inline-block;
margin: 5em 0 3em 0;
width: 66.2em;
height: 35.2em;
text-align: left;
overflow: hidden;
}
.icon {
background: #000;
float:left;
height: 5em;
width: 5em;
margin: 4% 0.2em 0.2em 0;
display: inline-block;
}
.title {
background: #777;
height: 10.2em;
width: 21.4em;
margin: 0 0.2em 0 0;
display: inline-block;
float:left;
}
please see this code, i hope it will helpful.