How can I align items the the middle (Vertically) in CSS?

Question

Here is my CSS code:

.well-searchbox {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

The above CSS aligns the item in the middle horizontally but not vertically, I tried vertical-align: middle and height: 50% but it didn't work.

Below is the HTML code where I apply .well-searchbox (first line):

<div class="well-searchbox">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-md-4 control-label">Keyword</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" placeholder="Keyword">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Country</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="Country">
                            <!-- some code -->
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Province</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="Province">
                            <!-- some code -->
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">City</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="City">
                            <!-- some code -->
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Category</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="Category">
                            <!-- some code -->
                        </select>
                    </div>
                </div>
                <div class="col-sm-offset-4 col-sm-5">
                    <button type="submit" class="btn btn-success">Search</button>
                </div>
            </form>
        </div>

Can I please have some guidance on what attribute I should use to align align the search box to the middle vertically?

vertical alignment also depends on the settings of the parent element - you need to post more code — Johannes, Sep 21 '17 at 18:55
Possible dulipcate https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — sn3ll, Sep 21 '17 at 19:03
Possible duplicate of [Vertical alignment of elements in a div](https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — sn3ll, Sep 21 '17 at 19:03

score 0 · Accepted Answer · answered Sep 21 '17 at 19:06

0

you can use transform property for styling.

You can add following in your css corresponding element to make it vertical align

 .element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

answered Sep 21 '17 at 19:06

mahip_j

368
2
11

How can I align items the the middle (Vertically) in CSS?

1 Answers1