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/
Related
The h1 with the border:
h1 {
font-size: 2.125em;
border-bottom: 1px solid #aaa;
width: 100%;
display: block;
}
The float-right "Contents":
div {
float: right;
clear: right;
margin-bottom: .5em;
padding: .5em 0 .8em 1.4em;
background: transparent;
max-width: 20em;
}
How do I remove the lines piercing the Contents section to the right?
If you want to remove the lines where the contents begin you can just add background: #fff; to contents div style.
And if border-bottom must be only under "The Rules" and "Character Setup" you can use text-decoration: underline; instead of border-bottom: 1px solid #aaa; or wrap every h1 in div and add to wrapped h1 display: inline-block;
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.
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)
How to create border with help of css3 like the bellow image.
There is a border-radius notation for horizontal and vertical radius,
border-radius: horizontal-radius/vertical-radius;
Using this you can create the desired border.
.border {
width: 250px;
height: 50px;
border: 1px dashed #aaa;
border-radius: 50%/20%;
text-align: center;
line-height: 50px;
font-size: 30px;
color: red;
font-family: Helvetica;
}
<div class="border">Text Here</div>
Modify the border values according to your need.
You can use border radius in order to get the 'curved' border of the div. Along with adding a dashed border, you can add uppercasing and text aligning for your text.
Result
div {
width: 250px;
height: 50px;
font-family: Helvetica;
border: 1px dashed gray; /*Makes dashed border*/
border-radius: 50%/10px; /*Change the px value in order to change border curvature*/
text-align: center;
line-height: 50px;
font-size: 30px;
color: red;
text-transform:uppercase;
}
<div>Text Here</div>
So I'm trying to vertical align images within a container div. I tried adding vertical-align: middle; to the parent div with no luck.
<div class="contributor_thumbnail"><img src="image.jpg"></div>
<div class="contributor_thumbnail"><img src="image.jpg"></div>
.contributor_thumbnail {
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
vertical-align: middle;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
What I would do is set the image as a background image.
.contributor_thumbnail {
/* Background image instead of using and img tag */
background: url(image.jpg) center center no-repeat;
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
Try this:
HTML
<div class="contributor_thumbnail">
<div class="content">
<img src="image.jpg">
</div>
</div>
CSS:
.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;}
.content {clear:both; height:240px; position:relative;}
Inspired by: Lost in the Woods vertically centering with CSS.
.contributor_thumbnail img {
margin-left: auto;
margin-right: auto;
}
http://www.bluerobot.com/web/css/center1.html