A
A
Artyom2015-10-21 15:55:09
css
Artyom, 2015-10-21 15:55:09

How to center radio input?

I'm building a website. Locally everything looks good, just couldn't center it radio input
Made a demo on JSFiddle .
When there is no map of the area that will be under the address, the submit leaves somewhere in the wrong place.
Guess I'm using grid incorrectly.
It should be.
X5aoQ5h.png

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey Khokhlov, 2015-10-21
@SlampD

Yes, you are using grid incorrectly.
Columns must be - in rows. One line - no more than 12 columns.

.row
    .col
        .row
            .col
            .col
    .col

First, divide the block into 2 columns: with the address and with the form.
Then, inside the column with the form, already make new columns (do not forget that they are in bootstrap as a percentage of the parent).
As for the centering of the radio buttons, add to their parent (form-group) a class with the property text-aligh: center.
UPD: if you mean vertical centering, then add a radio propertyvertical-align: top

M
Mike, 2015-10-21
@Goodilla

Radio Buttons are centered (with respect to the vertical) by wrapping them in a span, with float or display:table-cell applied to it (depending on how you did the "input-label" pair). If the first case, then we make SPAN itself floating (float) and set its length value (about 15px), after which the inner input should be positioned (position:absolute), and aligned with the margin property: 3px 0 0 0 - approximately.
As for the button, it's the same story here, you can use float:right or enclose this disgrace in containers. That is, it turns out two containers, on the left is a map, on the right is a button. Again, it all depends on how you did the layout, maybe you have a large block on the left and on the right, and not so that the blocks go one after the other ...
I hope that helped ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question