current position:Home>Learn how to use CSS to circle numbers

Learn how to use CSS to circle numbers

2022-04-29 16:05:23Lingering memory of Yufei

Learn how to use css Circle numbers

design sketch

 Insert picture description here

Code

css style

We add styles , Give Way div Add background color , Add height , Width , And set it as an inline element (display:table-cell), Another key style is to add border-radius, Frame radian .

table-cell How to display , Convenient left and right , Center up and down , Add a centered style .

 /* Circle the numbers */
    .number_top_circle {
    
        display: table-cell;
        border-radius: 18px;
        background-color: #0052d9;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        color: #fff;
    }

    .number_top_no_circle {
    
        display: table-cell;
        border-radius: 18px;
        background-color: #cccccc;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        color: #333333;
    }
    /* Circle the numbers */

html Code

Key code

<div class="number_top_circle">1</div>
<div class="number_top_circle">2</div>
<div class="number_top_circle">3</div> 
<div class="number_top_no_circle">4</div>
<div class="number_top_no_circle">5</div>
<div class="number_top_no_circle">6</div>

copyright notice
author[Lingering memory of Yufei],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291425561955.html

Random recommended