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
Creating a circle around a letter or text works fine, but in my case I only want to circle a single letter within a word (which is within an H1 tag):
.large {
font-size: 5em;
}
.circle {
border-radius: 50%;
padding: -0.5% 5% 0% 5%;
background: #fff;
border: 10px solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Fiddle is here: https://jsfiddle.net/henzen/zwph2nsv/4/
This produces:
Notice that the circle is conforming to the H1 height (I think) - I need it to be compressed vertically, ie the vertical padding needs to be the same as the horizontal, tightly wrapped around the "e".
Is this possible, or would I need to separate the "e" from the "Text" completely in the HTML?
I have tried Unicode chars (eg, ⓔ), which work, but cannot be reliably styled across browsers.
Thanks for any pointers.
You could use a pseudo element.
.large {
font-size: 5em;
}
.circle {
position: relative;
color: red;
}
.circle:after {
content: '';
width: 39px;
height: 44px;
border: 4px solid red;
position: absolute;
border-radius: 50%;
left: -5px;
top: 27px;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
use a pseudo element.
Try This: https://jsfiddle.net/2gtazqdy/12/
* {
margin: 0;
padding: 0;
}
.large {
font-size: 5em;
}
.circle {
height: 50px;
width: 50px;
display: inline-block;
padding-left: 20px;
}
.circle::after {
display: inline-block;
height: 50px;
width: 50px;
z-index: 1;
position: absolute;
top: 18px;
left: 4px;
content: "";
color: red;
background: transparent;
border: 10px solid red;
border-radius: 50%;
}
My output:
try this
for your html do <h1> <span> C </span> ircle </h1>
then in the css define your h1 span
and give it padding, in the shape of a rectangle you could use this =
padding: 20px 10px;
then add a border, for example =
border: 5px solid #ddd;
then at last give it a border radius, this is a bit tidious to figure out but just play around with the pixels and you'll eventually get it right how you want it.
for example =
Border-radius: 20px
your html:
<h1> <span> C </span>ircle </h1>
your total css:
h1 span{
padding: 20px 10px;
border: 5px solid #ddd;
border-radius: 20px;
}
If you want to make a circle, the following is needed:
display: inline-block (or display: block)
same width, height and line-height
text-align: center
Use em to correspond with the font-size of the container.
Example
.large {
font-size: 5em;
}
.circle {
display: inline-block;
width: 0.8em;
height: 0.8em;
line-height: 0.8em;
text-align: center;
border-radius: 50%;
background: #fff;
border: 0.05em solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Please try this code
.large{
text-align: center;
font: 40px Arial, sans-serif;
color:#000;
font-weight:bold;
}
.circle {
border-radius: 50%;
background: #fff;
border: 6px solid red;
padding: 3px 10px;
text-align: center;
font: 28px Arial, sans-serif;
color: #000;
font-weight: bold;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
I´d like to know how I can place a "floating action button" as Google calls it (Reference: Floating Action Button, Google Material Design) dynamically between two "seams" - depending on the element it is placed in.
In my case I use simple HTML container classes with few CSS rules to create Google Cards.
The HTML and CSS Code I used here looks like the following:
/* Google Material Design (Paper-) Cards */
*.card {
position: relative;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: var(--grey800);
background-color: var(--grey50);
}
*.card .card-header {
position:relative;
padding: 20px 16px;
border-radius: 2px 2px 0px 0px;
-moz-border-radius: 2px 2px 0px 0px;
-webkit-border-radius: 2px 2px 0px 0px;
}
*.card .card-header > span.card-title {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
line-height: 1.5em;
}
*.card .card-header > span.card-subtitle {
display: block;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.5em;
color: var(--grey700);
}
*.card .rich-media {
position: relative;
}
*.card .rich-media > img {
display: block;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
border: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
*.card .card-header ~ .rich-media > img {
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
}
*.card .rich-media > span.card-title {
position: absolute;
left: 0;
bottom: 0;
padding: 20px 16px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
color: var(--white);
}
*.card .card-content {
padding: 20px 16px;
}
*.card .card-content + .card-content {
border-top: 1px solid rgba(160, 160, 160, 0.2);
}
*.card .card-action {
position: relative;
padding: 20px 16px;
border-top: 1px solid rgba(160, 160, 160, 0.2);
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
background-color: inherit;
}
*.card .card-action > a {
transition: color .3s ease;
font-family: 'Roboto', sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.5em;
text-decoration: none;
text-transform: uppercase;
color: var(--orange500);
}
*.card .card-action > a:hover {
color: var(--orange200);
}
/* Google Material Design Buttons */
*.btn {
/* ... */
}
*.floating-action {
width: 56px;
height: 56px;
text-align: center;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
*.floating-action .material-icons {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="card" data-elevation="1">
<!-- card header -->
<div class="card-header">
<span class="card-title">Card Title</span>
<span class="card-subtitle">Card Subtitle</span>
</div>
<!-- card image -->
<div class="rich-media">
<image src="mountains.jpg"></image>
</div>
<!-- card content -->
<div class="card-content align-left">
<!-- floating action button -->
<div class="floating-action bg-orange500" data-elevation="2">
<i class="material-icons txt-white">mail_outline</i>
</div>
<p class="flowtext">
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
</p>
</div>
<!-- card actions -->
<div class="card-action">
This is a link
</div>
</div>
What I am trying to approach is a way of placing the seen button (the little one with the envelope icon on it) between (the previous) two contiguous borders like shown with a red dot below:
It is also possible to add multiple content containers; In this case the placed buttons should also be placed between the previous contiguous container borders.
In the last case shown above the button would be placed inside the 2nd card-container element.
Maybe some jQuery calculation would help. What do you think? What is a good practice to achieve the required layout?
In this Page: http://materializecss.com/cards.html you can access cards examples and one of them is placing the FAB button between title and content of the card. All you have to do is to see the CSS they show in source code.
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
.btn-floating.btn-large i {
line-height: 56px;
}
.btn-large i {
font-size: 1.6rem;
}
.btn-floating i {
width: inherit;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.6rem;
line-height: 40px;
}
.btn-floating.btn-large.halfway-fab {
bottom: -28px;
}
.btn-floating.halfway-fab {
position: absolute;
right: 24px;
bottom: -20px;
}
.btn-floating.btn-large {
width: 56px;
height: 56px;
padding: 0;
}
Here's the code. How to center a search form? This form should be always at the center of the screen no matter what screen resolution is.
I tried margin: 0 auto; but it doesn't work.
Thank You.
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>
Aligning text
Just add text-align: center to form and it is centered on all screen sizes.
text-align: center
This property describes how inline-level content of a block container is aligned.
form {
text-align: center; /* Add */
}
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>
Flexbox solution(Modern):
align-items: center
Items are centered in the cross-axis
Note that in the example we are using flex-direction: column. otherwise just use justify-content: center for flex-direction: row
.search-p {
display: flex;
flex-direction: column; /* Cross axis alignment; simply said vertical stacking/positioning */
align-items: center; /* Center cross-axis */
}
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>
I like to use the new Flexbox layout to place something in the center, a good guide is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Although it's rather new, but it's already supported in majority browsers and it's looking to become the new standard in the next year or so.
/* added new code */
.search-p {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>
CSS and form validation have nothing to do with each other, one is simply styling - the other is data checking which is handled either client-side by JS (bad idea without server validation) and / or server side by (always do this) so there will be no problem. (reacted on comment).
Some other problems might surface tho since text-align: center only works when elements are display: inline-block - float: left; float: right; display: block; will all break this center.
What I would suggest doing is adding a wrapper that will center the search in the form through means of margin: 0 auto - which is a much more solid way to center elements than text-align: center which as it says is meant for text (even tho I have also abused this property many many many times over).
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
/* Added a selector here */
.search-form .search-form-field-wrap {
display: block; /* optional - divs are block by default. */
width: 80%; /* or anything else */
margin: 0 auto; /* you're gonna want to use this for centering block elements */
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
form {
text-align: center;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<!-- added a wrapper here -->
<div class="search-form-field-wrap">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</div>
</form>
</div>
Is there a CSS way to create a circle around a text. My text is just a "+" sign and im trying to create a circle around it. I tried the bootstrap badge but thats oval.
Any ideas?
Thanks.
Here is the fiddle
<span>+</span>
span {
display: block;
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: grey;
color: white;
text-align: center;
font-size: 2em;
}
Try this one
HTML
<label>+</label>
CSS
label{
padding: 4px 9px;
background: #dddddd;
width: 1px;
border-radius: 45%;
}
http://jsfiddle.net/XBc2M/
Just adjust the padding depending to you need
Here's what we did in one of our apps, hope it's helpful.
.circle {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
background-color: red;
text-align: center;
font-weight: bold;
vertical-align: middle;
line-height: 20px;
}
<div class="circle">+</div>
Here's the Codepen: http://codepen.io/SaraChicaD/pen/zKYaoO
I've got the following css element. the CSS is as following
.bill-item {
width: 253px;
height: 60px;
background-color: white;
border: 1px solid #dadada;
border-radius: 6px;
margin-left: 22px;
margin-top: 15px;
margin-bottom: 15px;
}
.item-drop-point {
height: 40px;
width: 253px;
border: 1px dashed #dadada;
text-align: center;
background-color: white;
border-radius: 6px;
margin-left: 22px;
margin-top: 15px;
margin-bottom: 15px;
}
.item-drop-point span {
color: #dadada;
vertical-align: -10px;
}
.bill-item-img {
height: 60.4px;
width: 60px;
float: left;
border-radius: 5px;
background-image: url(../images/bill_item_img.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.bill-item-description {
width: 148px;
float: left;
height: 100%;
}
.bill-item-price {
float: left;
padding: 8px 0px 0px 7px;
width: 107px;
height: 25px;
font-family: MyriadProReg;
}
.bill-item-amount {
float: right;
padding: 8px 0px 0px 7px;
width: 25px;
height: 22px;
border-left: 1px solid rgb(230, 230, 230);
}
.bill-amount-selection {
width: 44.9px;
height: 100%;
float: right;
background-image: url(../images/item_amount_selection_bg.jpg);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.amount-increase {
height: 50%;
width: 100%;
background-image: url(../images/item_amount_inc.jpg);
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.amount-decrease {
height: 50%;
width: 100%;
background-image: url(../images/item_amount_dec.jpg);
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.bill-item-name {
padding-top: 5px;
border-bottom: 1px solid rgb(230, 230, 230);
height: 25px;
font-family: MyriadProReg;
}
.bill-item-name-left {
float: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 4px;
font-family: MyriadProReg;
font-weight: normal;
font-size: 14px;
}
.bill-item-name-right {
float: right;
padding-top: 3px;
color: #878787;
font-family: MyriadProReg;
font-weight: 400;
}
I load text using an ajax post so some times I get more characters that I can show in the element. I hope you can get an idea from the following image.
The div hierarchy is following.
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
How can I fix this issue using CSS.. please help me!
Posting this as an answer to show the changes on the CSS class bill-item-name-left, did you tried something like this ?
.bill-item-name-left {
float: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 4px;
font-family: MyriadProReg;
font-weight: normal;
font-size: 14px;
white-space: nowrap;
overflow:hidden;
}
If that does the trick, you should check the value you can set on the overflow or even use the text overflow property, more info : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp