I was wondering how I could center this div.
https://jsfiddle.net/eLjy45zq/
I tried adding auto margin but it won't center it on the screen.. i also want it to be responsive. i didn't want to add a fixed width because i want the border top/bottom line to match the length of the word. Also, is there a way i can make the top and bottom lines double?
.name {
font-family: 'PT Sans', sans-serif;
font-size: 80px;
border-top: 1px solid black;
border-bottom: 1px solid black;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.wrapper {
position: fixed;
top: 30px;
left: 0px;
width: 100%;
text-align: center;
}
.name {
font-family: 'PT Sans', sans-serif;
font-size: 80px;
border-top: 1px solid black;
border-bottom: 1px solid black;
display: inline-block;
}
https://jsfiddle.net/eLjy45zq/2/
Create a wrapper and use display: inline-block; to get the lines to work how you want them.
(Added position: fixed to the wrapper, change as needed)
Related
I am trying to have a border only for top and border with a line that is thick (4px) in the middle and at the ends goes to zero. Like in the pic
.hervorheben{
line-height: 1.6em;
margin-bottom: 1.6em;
margin-top: 1.6em;
text-rendering: optimizeLegibility;
border-top: 1px solid #105322;
border-bottom: 1px solid #105322;
padding: 19px;
margin: auto auto;
}
Do you know how to do so with only css?
You can`t make border like that but you can manage with Pseudo-element (after) like following
.your_class {
position: relative
}
.your_class:after {
position: absolute;
width: 100%;
height: 4px;
background: #000;
border-radius: 100%;
content: "";
top: 0;
left: 0;
}
Enjoy....
This is where I am trying to accomplish this effect:
http://www.smalldot.agency/ccren/goals-page/
As the "val" bar increases in width, it should overlap the "current" text ((which is the same text as "val" but a different color)). I am able to force "current"'s copy on top of the "val" element, but I can't get it to rest underneath instead.
If I place the "current" p class below the "val" div class, the the text from "current" shows up south of the progress bar, rather than beneath it.
Also, the z-index: 0; doesn't seem to be doing anything to fix the problem.
HTML:
<div class="progdiv" style="width:100%;">
<p class="current">1,234</p>
<div class="val" style="width:3%;">1234</div>
</div>
CSS
.val {
height:100%;
border-radius:3px;
line-height: 1.5em;
font-size: 12pt;
background: #019BA9!important;
text-align: left!important;
vertical-align: center;
-webkit-box-shadow: 3px 3px 2px #bbbbbb;
overflow:hidden;
}
.progdiv {
background-color: #FFFFFF!important;
height: 1.5em;
text-align: right;
vertical-align: center;
border: solid 1px #eeeeee;
border-radius: 3px;
-webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
text-align: left!important;
overflow: hidden!important;
}
.current {
text-indent: 6px;
height:100%;
border-radius:3px;
font-size: 12pt;
line-height: 1.5em;
text-align: left!important;
vertical-align: center;
color: #019BA9!important;
position:absolute!important;
text-align: left!important;
z-index: 0;
}
Just add position: absolute; to the .val CSS. Also remove the height:100% from both the .val and .current CSS.
This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 years ago.
I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #3E78B2;
}
Here is link to jsFiddle
You could see currently it has some white border. I would like to add another border on top of white border.
Please let me know if you have any ideas/suggestions.
Hi u can make this also :
.container {
background-color: grey;
height: 200px;
padding:10px; // ADD THIS ALSO
}
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}
the advantage is that you can also put a blur effect, changing like this:
box-shadow: 0 0 3px 3px #002525;
If I understand you correctly, I think you're looking to do something along these lines: http://jsfiddle.net/QCVjr/1/
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #000;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #fff;
position: relative;
z-index: 1;
}
.circle:before {
position: absolute;
right: 2px;
top: 2px;
left: 2px;
bottom: 2px;
content: '';
background: #3E78B2;
border-radius: 25px;
z-index: -1;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #fff;
}
You'll notice that I took your original background color and added it to the :before pseudo-element, moved the #fff to the background, and made your other border color (in this example, #000) the border color of the original element. Both z-indexes are required to get the right layering.
Problem:
I need to use display:table (in the parent div) and display:table-cell (in the contained div) to center some content vertically. This is working except when the content overflows vertically. I want to restrict the height so that a scrollbar appears if there's any vertical overflow.
Fiddle:
http://jsfiddle.net/PTSkR/110/
(Note that in the output, the div is expanded vertically despite me setting the height to 160px)
CSS:
side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px !important;
display: table !important;
margin: 0px !important;
margin-left: -1px !important;
position: relative;
overflow-y: scroll;
width: 100%;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px !important;
float: right;
display: table;
overflow-y: scroll;
}
.side-study-box .text-content-saved {
width: 100% !important;
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px !important;
background-color: white;
padding: 0px !important;
margin: 0px !important;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
border: 0px !important;
overflow-y: scroll;
}
here is your fiddle updated , with max-height on content wrapper.
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
display: table;
width: 100%;
border-spacing:1em;
}
.side-box-content {
width: 100%;
height: ;
display: table-cell;
}
.text-content-saved {
max-height:160px;
overflow:auto;
padding:5px;
}
http://jsfiddle.net/GCyrillus/6tLAu/
up here first code was : the box doesn't grow.
down here second does first and centers content if little.
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
display: table;
width: 100%;
border-spacing:1em;
height:160px;
}
.side-box-content {
width: 100%;
height: ;
display: table-cell;
vertical-align:middle;
}
.text-content-saved {
max-height:140px;
overflow:auto;
padding:5px;
}
I'm trying to center a single character, like this:
<div class='button'>x</div>
<div class='button'>+</div>
<div class='button'>*</div>
.button {
border: solid 2px #aaa;
-moz-border-radius:2px;
-webkit-border-radius:2px;
color: #888;
width: 16px;
height: 16px;
font-weight: bold;
text-align:center;
float: left;
margin-right:5px;
font:14px Helvetica Neue,Helvetica,Arial,sans-serif;
line-height: 100%;
}
this centers the character in each div horizontally, but not vertically - what do we need to do to center it vertically as well?
Thanks
Since it's a single character:
line-height: 100%;
and if setting line-height to 100% didn't work set it to the fixed height of the container:
.button {
height:300px;
width: 300px;
text-align: center;
line-height: 300px;
border: 1px dotted #999;
}
Check here: http://jsfiddle.net/7afUH/1/