Convert ellipse to circle CSS [duplicate] - css
I would like to surround a number in a circle like in this image:
Is this possible and how is it achieved?
Here's a demo on JSFiddle and a snippet:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>
My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.
The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>
If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.
See it on JSFiddle.
For circle sizes varying based on the content this should work:
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 8px;
margin-right: 8px;
}
<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>
It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.
Update to remove inner element:
.numberCircle {
display: inline-block;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle:before,
.numberCircle:after {
content: '\200B';
display: inline-block;
line-height: 0px;
padding-top: 50%;
padding-bottom: 50%;
}
.numberCircle:before {
padding-left: 8px;
}
.numberCircle:after {
padding-right: 8px;
}
<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>
Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0px from the outer to the pseudo so that it is at least visible when degrading for IE8.
If it's 20 and lower, you can just use the unicode characters ① ② ... ⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
the easiest way is using bootstrap and badge class
<span class="badge">1</span>
This version does not rely on hard-coded, fixed values but sizes relative to the font-size of the div.
http://jsfiddle.net/qod1vstv/
CSS:
.numberCircle {
font: 32px Arial, sans-serif;
width: 2em;
height: 2em;
box-sizing: initial;
background: #fff;
border: 0.1em solid #666;
color: #666;
text-align: center;
border-radius: 50%;
line-height: 2em;
box-sizing: content-box;
}
HTML:
<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
You can use the border-radius for this:
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html>
Play with the border radius and the padding values until you are satisfied with the result.
But this won't work in all browsers. I guess IE still does not support rounded corners.
I am surprised nobody used flex which is easier to understand, so I put my version of answer here:
To create a circle, make sure width equals height
To adapt to font-size of number in the circle, use em rather than px
To center the number in the circle, use flex with justify-content: center; align-items: center;
if the number grows (>1000 for example), increase the width and height at same time
Here is an example:
.circled-number {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
}
.circled-number--big {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
}
<div class="circled-number">
30
</div>
<div class="circled-number--big">
3000000
</div>
Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>
You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 classes to your <span> (or whatever) element and you're done.
Note that you might need to adjust margin and padding classes if your content has more than one digits.
My solution here - this easily allows for different sizes and colors and ties into a CMS for editorial control. For IE degrading to squares.
HTML:
<div class="circular-label label-outer label-size-large label-color-pink">
<div class="label-inner">
<span>Fashion & Beauty</span>
</div>
</div>
CSS:
.circular-label {
overflow: hidden;
z-index: 100;
vertical-align: middle;
font-size: 11px;
-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
width: 85%;
height: 85%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px dotted white;
vertical-align: middle;
margin: auto;
top: 5%;
position: relative;
overflow: hidden;
}
.label-inner > span {
display: table;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-transform: uppercase;
width: 100%;
position: absolute;
margin: auto;
margin-top: 38%;
font-family:'ProximaNovaLtSemibold';
font-size: 13px;
line-height: 1.0em;
}
.circular-label.label-size-large {
width: 110px;
height: 110px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
border-radius: 55px;
margin-top:-55px;
}
.circular-label.label-size-med {
width: 76px;
height: 76px;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
margin-top: 33%;
}
.circular-label.label-size-small {
width: 66px;
height: 66px;
-moz-border-radius: 33px;
-webkit-border-radius: 33px;
border-radius: 33px;
margin-top:-33px;
}
It's not too difficult to see how to do this. The bigger question is whether it is possible to make the dimensions of the circle scale to content.
Currently I don't think it is possible. Anyone?
Here's a demo on JSFiddle and a snippet:
/* Creating a number within a circle using CSS */
.numberCircle {
font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
display: inline-block;
color: #fff;
text-align: center;
line-height: 0px;
border-radius: 50%;
font-size: 12px;
min-width: 38px;
min-height: 38px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 1px;
margin-right: 1px;
}
/* Some Back Ground Colors */
.clrGreen {
background: #51a529;
}
.clrRose {
background: #e6568b;
}
.clrOrange {
background: #ec8234;
}
.clrBlueciel {
background: #21adfc;
}
.clrMauve {
background: #7b5d99;
}
<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>
.numberCircle {
border-radius: 50%;
width: 40px;
height: 40px;
display: block;
float: left;
border: 2px solid #000000;
color: #000000;
text-align: center;
margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>
Late to the party but here's the solution I went with https://codepen.io/jnbruno/pen/vNpPpW
Required no extra work.
Thanks John Noel Bruno
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
<div class="panel-body">
<h4>Normal Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</button>
</div>
Do something like this in your css
div {
width: 10em; height: 10em;
-webkit-border-radius: 5em; -moz-border-radius: 5em;
}
p {
text-align: center; margin-top: 4.5em;
}
Use the paragraph tag to write the text. Hope that helps
Improving the first answer just get rid of the padding and add line-height and vertical-align:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
vertical-align:middle;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
The answer of thirtydot is right but is missing a little point. You need to add position: relative , if you want to have centered value in the circle and include also different range of number.
For example 123;
HTML:
<div class="numberCircle">30</div>
CSS:
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
but an easiest solution is to use Bootstrap
<span class="badge" style ="float:right">123</span>
Heres my way of doing it, using square method. upside is it works with different values, but you need 2 spans.
.circle {
display: inline-block;
border: 1px solid black;
border-radius: 50%;
position: relative;
padding: 5px;
}
.circle::after {
content: '';
display: block;
padding-bottom: 100%;
height: 0;
opacity: 0;
}
.num {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.width_holder {
display: block;
height: 0;
overflow: hidden;
}
<div class="circle">
<span class="width_holder">1</span>
<span class="num">1</span>
</div>
<div class="circle">
<span class="width_holder">11</span>
<span class="num">11</span>
</div>
<div class="circle">
<span class="width_holder">11111</span>
<span class="num">11111</span>
</div>
<div class="circle">
<span class="width_holder">11111111</span>
<span class="num">11111111</span>
</div>
You can use
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<h1><span class="grey">1</span>A grey circle with number inside</h1>
<h1><span class="red">2</span>A red circle with number inside</h1>
<h1><span class="blue">3</span>A blue circle with number inside</h1>
<h1><span class="green">4</span>A green circle with number inside</h1>
<h1><span class="pink">5</span>A pink circle with number inside</h1>
Thank to https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/
Something like this could work (for numbers 0 to 99):
.circle {
border: 0.1em solid grey;
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
}
.circle p {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
color: grey;
}
<body>
<div class="circle">
<p>30</p>
</div>
</body>
You work like with a standard block, that is a square
This is feature of CSS 3 and it is not very well suporrted, you can count on firefox and safari for sure.
.circle {
width: 10em;
height: 10em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
border: 1px solid black;
}
<div class="circle"><span>1234</span></div>
Related
Image position inside pill element
I need the image to be sticked to left and occupy entire corner without taking spacing in top and bottom.Below is the CSS used for the chip and for the image inside chip.
.imgDiv{
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
width: fit-content;
border-radius: 25px;
background-color: #f1f1f1;
}
.img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
You can do it easily and purely with CSS flexbox:
.UserPill {
display: inline-flex;
align-items: center;
border-radius: 6em;
padding-right: 0.5em;
background-color: #f1f1f1;
font: 16px/1.6 sans-serif;
gap: 10px;
}
.UserPill-img {
height: 2.4em;
width: 2.4em;
object-fit: cover;
border-radius: 50%;
}
.UserPill-remove {
border: 0;
cursor: pointer;
background: transparent;
}
<div class="UserPill">
<img class="UserPill-img" src="https://picsum.photos/id/237/100/100">
<span class="UserPill-name">Chris Morris</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
<div class="UserPill">
<img class="UserPill-img" src="https://i.stack.imgur.com/qCWYU.jpg?s=328&g=1">
<span class="UserPill-name">Roko</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
<div class="UserPill">
<img class="UserPill-img" src="https://lh6.googleusercontent.com/-IdYKeLCNsyQ/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmgTYg8zk2oLDC9ZC0NM8sFu23r3g/s96-c/photo.jpg?sz=328">
<span class="UserPill-name">Anto Clinton</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
<div class="UserPill">
<img class="UserPill-img" src="https://i.stack.imgur.com/MGiQc.jpg?s=128&g=1">
<span class="UserPill-name">Amirreza Amini</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
I could get what you mean a bit. I think you want something like this. I don't know why you applied padding to .imgDiv, I deleted that. I think you applied it because of the width, use width instead.
.imgDiv {
display: inline-block;
/* EDITED HERE (USE WIDTH INSTEAD)
padding: 0 25px;*/
height: 50px;
font-size: 16px;
line-height: 50px;
/* RIGHT DOWN BELOW */
width: 200px;
border-radius: 25px;
background-color: #f1f1f1;
}
.img {
float: left;
/* EDITED HERE (DELETED)
margin: 0 10px 0 -25px; */
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class='imgDiv'>
<img src='https://picsum.photos/200/300' class='img'>
<span>Chris Moris</span>
<span>✕</span>
</div>
svg + div mouseover popup
hej there.
i created an svg from a complex image, showing a city map. including tiny green boxes to mark certain houses, etc. with A,B,C or other. (can be seen in screenshot)
on mouseover, a div box should appear (with more than a tooltip-line - as shown in the screenshot and by code) - positioned within the viewbox and next to the pointer.
alternatively it could be an overlay - centered within the viewbox - that disappears when moving the pointer away from the anker.
i was not able to achieve this with plain css, working with combined #C .mark #markc (for example) and visibility.
SVG-'box':
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
DIV to appear:
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div> <div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
CSS code:
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
it is supposed to be a 'present'. i have nearly no experience with javascript - i am happy to use it as a solution, but might need a 'clear' instruction. it is up to 25 'pins' on the complete map.
many thanks!
screenshot
Here's a very simple example implementation to get you started.
You'll need to do a little more work to make it work with more than one tooltip. Not also that it assumes your map is at 1:1. If your SVG has a viewBox or is otherwise scaled, you need to do some work to get the correct coordinates to show the tooltip at. You can find out how to do that by searching Stack Overflow.
var C = document.getElementById("C");
// Add an event handler to C that fires when the mouse moves over it
C.addEventListener("mousemove", function(evt) {
let markc = document.getElementById("markc");
// Position the tooltip element near the mouse
markc.style.left = (evt.offsetX + 10) + "px";
markc.style.top = evt.offsetY + "px";
// Show the tooltip element
markc.classList.remove("hidden");
});
// Add an event handler to C that fires when the mouse leaves the element
C.addEventListener("mouseout", function(evt) {
hideElement("markc");
});
// Hide the element with given id
function hideElement(id) {
document.getElementById(id).classList.add("hidden");
}
// Start out with the tooltip hidden
hideElement("markc");
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: absolute; /* changed to absolute so we can position it where we want */
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
.cls-245 {
fill: green;
}
.cls-6 {
fill: white;
}
/* Needs to be position relative so we can later position the tooltip relative to it. */
.container {
position: relative;
}
/* class used to hide the tooltip when we don't want it showing */
.hidden {
display: none;
}
<div class="container">
<svg width="400" height="700">
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
</svg>
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div>
<div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
</div>
CSS circle overlapping section
I would like my H2 title to appear like this image is showing
At this moment this is how my code looks like
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
.green-bg { background: #488429; }
.title-border { border-radius: .25rem!important; }
.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }
.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
I am quite confused on how to solve this problem. Any suggestions?
I have added position:relative for the green background div and for the button i have set it to position:absolute aligned it horizontally using left:50% and transform:translateX(-50%) and move it vertically i have given half of the height of the button as top:-35px which will align it vertically half
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
position:absolute;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
top:-35px;
}
.green-bg {
background: #488429;
margin:100px 0 0 0;
position:relative;
}
.title-border {
border-radius: .25rem!important;
}
.text-title-center {
text-align: center!important;
color: #fff;
font-size: 41px;
}
.text-title-text-h2 {
color: #fff;
padding-top: 4rem;
padding-bottom: 3rem;
font-size: 32px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="green-bg title-border">
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
Display the button as a block element, adjust margins as needed.
margin: 0 auto -35px auto;
display: block;
position: relative;
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
margin: 0 auto -35px auto;
display: block;
position: relative;
}
.green-bg { background: #488429; }
.title-border { border-radius: .25rem!important; }
.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }
.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
Here you go
.btn-circle.btn-xl {
position:relative;
top: 30px;
left: 270px;
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
.green-bg { background: #488429; }
.title-border { border-radius: .25rem!important; }
.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }
.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
I've added
position:relative;
top: 30px;
left: 270px;
EDIT: this will put it at a fixed position, to get it at the center of the page you can add this:
position:relative;
top: 30px;
left: calc(100% - 50% - 35px); //35px = half the width of the circle.
Transparent the background of the text
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
Center horizontally and vertically inside CSS3 circle
Please take a look at this
http://jsfiddle.net/T7cVg/7/
What I'm trying to do is to get css3 circles with centered icons (both: horizontally and vert.). What am I doing wrong?
http://screencast.com/t/bpxIefbf
As you see, envelope stays in left side, phone too. In other words, position of icons is not in center.
CSS
.circle {
color: #fbfbfb;
width: 20px;
height: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #b0b8c2;
font-size: 11px;
font-weight: 200;
color: #d9dfe6;
text-align: center;
cursor: pointer;
line-height: 19px;
margin: 0 10px 0 0;
float:left;
}
HTML
<div class="circle">
<i class="icon-facebook"></i>
</div>
<div class="circle">
<i class="icon-twitter"></i>
</div>
<div class="circle">
<i class="icon-phone"></i>
</div>
<div class="circle">
<i class="icon-envelope"></i>
</div>
[class^="icon-"], [class*=" icon-"] {line-height: 20px}
This will work.
http://jsfiddle.net/T7cVg/8/ How about this? I have updated the jsfiddle. Will this work for you?
.circle {
color: #fbfbfb;
width: auto;
height: auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #b0b8c2;
font-size: 11px;
font-weight: 200;
color: #d9dfe6;
text-align: center;
cursor: pointer;
line-height: normal;
margin: 0 10px 0 0;
float:left;
padding:1em 2%;
}
.circle [class^="icon-"],
.circle [class*=" icon-"] {
line-height: normal
}