.search_on { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .search_on .select_item { margin-bottom: 0; } .search_on .select_item .checkbox { display: none; } input { border: none; } .search_on .select_item .label_checkbox { height: 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; font-size: 0; cursor: pointer; } .filter .options label { margin-right: 10px; } .filter .options .search_on .select_item .label_checkbox span { vertical-align: middle; font-size: 16px; font-family: museo_sans_cyrl300; font-weight: normal; } .search_on .select_item .checkbox+label>.checkbox_square { display: inline-block; cursor: pointer; margin-right: 10px; width: 20px; height: 20px; border: 2px solid #aa2b2b; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; position: relative; } .animate_background, .search_on .select_item .checkbox+label>.checkbox_square { -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .search_on .select_item .label_checkbox span { vertical-align: middle; font-size: 16px; font-family: museo_sans_cyrl700; font-weight: bold; line-height: 20px; } .filter .options .search_on .select_item .label_checkbox span { vertical-align: middle; font-size: 16px; font-family: museo_sans_cyrl300; font-weight: normal; } .search_on .select_item .label_checkbox span { vertical-align: middle; font-size: 16px; font-family: museo_sans_cyrl700; font-weight: bold; line-height: 20px; } .search_on .select_item .checkbox:checked+label>.checkbox_square { border: none; } .filter .options .search_on .select_item .label_checkbox span { vertical-align: middle; font-size: 16px; font-family: museo_sans_cyrl300; font-weight: normal; } .search_on .select_item .checkbox+label>.checkbox_square { display: inline-block; cursor: pointer; margin-right: 10px; width: 20px; height: 20px; border: 2px solid #aa2b2b; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; position: relative; } .animate_background, .search_on .select_item .checkbox+label>.checkbox_square { -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .search_on .select_item .label_checkbox span { vertical-align: middle; font-size: 16px; font-family: museo_sans_cyrl700; font-weight: bold; line-height: 20px; } .search_on .select_item .checkbox:checked+label>.checkbox_square:before { content: ""; width: 20px; height: 20px; background: -o-linear-gradient(45deg, #791717, #aa2b2b); background: linear-gradient(45deg, #791717, #aa2b2b); display: inline-block; position: absolute; top: 0; left: 0; } .search_on .select_item .checkbox:checked+label>.checkbox_square:after { content: ""; width: 14px; height: 12px; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 58; } 
 <div class="search_on"> <div class="select_item"> <input type="checkbox" class="checkbox check" id="on_PHOTO" name="NOT_PHOTO"> <label class="label_checkbox" for="on_PHOTO"> <span class="checkbox_square"></span> <span class="checkbox_label">С фото</span> </label> </div> </div>

Closed due to the fact that the essence of the question is not clear to the participants. Aleksandr barakin , Let's say Pie , AivanF. , user192664, Dmitry Kozlov Oct 29 '18 at 10:17 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    Option number 1. Horizontal centering

    Not. It is necessary to add the property text-align: center; view:

     .select_item { text-align: center; }

    Then the label will occupy a central position within the block.

    .select_item is your block in which the line label element is located. Setting the parent block to the text-align: center; property text-align: center; we centered all lower-case children

    Option number 2. Centering horizontally and vertically (the center of the block)

    Div with a select_item class has the height and width of the child label . Initially, we give him a fixed height and width within which we will center. Next we will give it the display: flex; property display: flex;

     .select_item { height: 100vh; width: 100vw; display: flex; }

    Now we center the label itself by setting the margin property to auto . This will automatically pick up the vertical and horizontal indents inside the block.

     .label_checkbox { margin: auto; }
    • meaning vertically ...? - Rabin
    • I added your code, in my opinion, nothing has changed horizontally ... - Rabin