I'm trying to position some text in the middle of a CSS box. i tired using top:20px; but this moved the whole but rather than the text. any idea how can i do this?
here is my code: jsfiddle
div {
background: #ff9600;
background: rgba(255, 150, 0, 0.95);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
z-index: 10;
}
<body>
<div>text</div>
</body>
Example 1
something like: this fiddle.
It uses the css of:
div {
height: 100%;
width: 100%;
background: #000;
font-size: 12px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
line-height: 80px;
}
which could be quite beneficial for you. :)
Example 2
A more versatile way would be to use span like this demo
which uses:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #123456;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Possible Alternative to (2)
A slight variation of the second example would be to treat the div like a table cell, so altering the above css to:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
border: 1px solid red;
}
span {
display: table-cell;
vertical-align: middle;
}
And so this should also work for you.
Try to this
Remove this css in
width:100%;
height:100%;
add this css
left:0;
right:0;
top:0;
bottom:0;
padding-top:20px;
Demo
You could use padding to move the text inside the box.
However, I think that you should create a tag (a box) especially for the text, and give it some css property to center this box in the center of the main div (the main box).
Try this my code:
<div>
<span class="vertical-text">
TEXT
</span>
</div>
$('.vertical-text').each(function()
{
parent_height = $(this).parent().height();
$(this).parent().css(
{
'height': parent_height + 'px',
'line-height': parent_height + 'px',
});
$(this).css(
{
'line-height': 'normal',
'display': 'inline-block',
});
});
Demo: http://jsfiddle.net/Silon/caonccjx/
Related
Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks
Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}
I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.
Who could help me to vertically align 2 divs inside a button element with these properties :
height of button is known
height of orange div is unknown
one of the div contain text (orange div), with 1 or 2 lines (number of lines is unknown)
.
Here is html code :
<button style="width: calc(125px * 1); height: calc(30px + 24px); margin-top: 0;margin-bottom: 0;">
<div id='bt_icon'></div>
<div id='bt_text'>Fermer</div>
</button>
CSS :
button {
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-left: 5px;
padding-right: 5px;
color: black;
font-family:'Tahoma', 'Arial', 'Helvetica', sans-serif;
font-size: 13px;
cursor: pointer;
background: linear-gradient(to bottom right, #EDDDB5, #D5C59D);
box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3) inset, -1px -1px 0 rgba(0, 0, 0, 0.3) inset, 2px 2px 8px rgba(0, 0, 0, 0.3);
}
#bt_icon {
float: left;
width: 34px;
height: 34px;
background-color: green;
}
#bt_text {
float: right;
width: calc(100% - 10px - 34px);
background-color: orange;
}
And the fiddle :
https://jsfiddle.net/15xceg8p/1/
The green square will contain an icon and is well vertically centered. The orange rectangle will contain text and is not vertically centered :(
Please update code
button {
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-left: 5px;
padding-right: 5px;
color: black;
font-family:'Tahoma', 'Arial', 'Helvetica', sans-serif;
font-size: 13px;
cursor: pointer;
background: linear-gradient(to bottom right, #EDDDB5, #D5C59D);
box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3) inset, -1px -1px 0 rgba(0, 0, 0, 0.3) inset, 2px 2px 8px rgba(0, 0, 0, 0.3);
}
#bt_icon {
width: 34px;
height: 34px;
background-color: green;
display: inline-block;
vertical-align: middle;
}
#bt_text {
display: inline-block;
vertical-align: middle;
width: calc(100% - 10px - 34px);
background-color: orange;
}
<button style="width: calc(125px * 1); height: calc(30px + 24px); margin-top: 0;margin-bottom: 0;">
<div id='bt_icon'></div>
<div id='bt_text'>Fermer</div>
</button>
try below styles and remove all css style from button
button{display: table-cell;}
button>div{display: table-cell;vertical-align: middle;}
Also remove float from both div's.
https://jsfiddle.net/t698pL8j/
Here is my jsfiddle: http://jsfiddle.net/zrqx5e34/
I have been created simple rounded images, now i want to add paragraph between two images,
Need to shows right side of between the images.
May i know how to do this? Can anyone help me? Thanks in advance.
http://s9.postimg.org/uloaz1mnj/Untitled_1.png
css:
.circular {
width: 100px;
height: 100px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('img/saina1.png') no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
margin-bottom: 130px;
position: relative;
}
.circular:after {
background-color: green;
content: "";
display: block;
height: 128px;
position: absolute;
bottom: 100px;
width: 2px;
left: 50px;
}
.circular:first-child:after {
display: none;
}
Try like this: Demo
As you are limiting the circular class width, its not possible to show beyond that while placing text inside it. So we can achieve something like this only
CSS:
.circular > p{
margin-top:90px;
margin-left:70px;
float:left;
height:128px;
width:100%;
overflow:hidden;
}
I'm wanting to align the text in my blog posts with the edges of my images. Right now the body of text is slightly skewed to the left. And also, what code do I need to enter so that the text is justified and where exactly do I enter it?
The site is: http://www.studywithstyleblog.com
And below is some of the code:
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: 0em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
width: 700px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 3px;
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
float: none;
width: 700px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
Thanks for your help!
The problem is in your code on your page.
You have <div> tags around your paragraphs instead of <p> tags.
The beginning of your faux-paragraphs are:
<div class="separator" style="clear: both; text-align: left;">
If you can change that "text-align" to justify instead of left, you'll be golden.
If you can get away from the inline CSS, you'll be better for it in the long run too.
The following line will justify your text:
text-align: justify;
I was trying to move the text slightly to the right. But it is impossible to implement in your code. You must have to change your code.There is 1 way to do it
1) Change the class of your paragraphs/text divs to "separator2" instead of "separator" and modify your CSS file like below:
.separator2
{
margin-left:20px
}
Adjust the margin-left accordingly. I have just added dummy value.