Remove From My Forums

How can I align control vertically in html ?

Question
0

Sign in to vote

User1253338400 posted

Hi

I currently use the following

<div class="form-inline">
<div class="form-group">
<select size="5" style="width: 400px"></select>
</div>
<div class="form-group">
<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" />
<input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" />
<input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" />
<input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />
</div>
<div class="form-group">
<select size="5" style="width: 400px"></select>
</div>
</div>

currently it displays a select options on the left and select options on the right and buttons in the middle , but the buttons are horizontal.
how can i put arrows (greater than and less than ) such that when i click on them they move the item. I have done the movement but just cant seem to get the alignment of the arrows in the midddle vertically. I am using Bootstrap as well.
I wanted to use

<span>›</span>
<span>»</span>
<span>‹</span>
<span>«</span>

but not sure if I can click on the span.

Thursday, September 26, 2019 1:35 AM

Answers

User-719153870 posted

Hi robby32,

Sorry to have kept you waiting so long.

robby32
can i increase size

Yes, use the font-size attribute of their style to change the arrows' size.

robby32
can i align all 3 in the centre of the page ?

Also yes, it can be done by the text-align, i think you have put this style in an incorrect place.

Please refer to below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        .large {
            font-size: 17px;
        }

        .form-inline {
            text-align:center;
        }
    </style>
    <script>
        function show() {
            alert('1');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="form-inline">
            <div class="form-group">
                <select size="5" style="width: 400px"></select>
            </div>
            <div class="form-group" style="text-align: center">
                <span class="large">&#8250;</span><br />
                <span class="large" onclick="show()">&#187;</span><br />
                <span class="large">&#8249;</span><br />
                <span class="large">&#171;</span>
                <%--<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" /><br />
                        <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" /><br />
                        <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" /><br />
                        <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />--%>
            </div>
            <div class="form-group">
                <select size="5" style="width: 400px"></select>
            </div>
        </div>
    </form>
</body>
</html>

Hope this could help.

Best Regard,

Yang Shen

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, September 27, 2019 1:19 AM

All replies

User-719153870 posted

Hi robby32，

get the alignment of the arrows in the midddle vertically.

I wanted to use

According to your description, i think what you are looking for is "text-align:center" in css.

Also, use a br tag in html can insert a line break which can change your horizontal tags to vertical.

Please refer to below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="form-inline">
            <div class="form-group">
                <select size="5" style="width: 400px"></select>
            </div>
            <div class="form-group" style="text-align: center">
                <span>&#8250;</span><br />
                <span>&#187;</span><br />
                <span>&#8249;</span><br />
                <span>&#171;</span>
                <%--<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" /><br />
                        <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" /><br />
                        <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" /><br />
                        <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />--%>
            </div>
            <div class="form-group">
                <select size="5" style="width: 400px"></select>
            </div>
        </div>
    </form>
</body>
</html>

Hope this could help and if i misunderstood your requirement, please feel free to tell.

Best Regard,

Yang Shen

Thursday, September 26, 2019 3:14 AM

0

Sign in to vote

User1253338400 posted

Hi

Yes that is what i was trying to do.

I assume I can still add a click event on the span ??

thanks

Thursday, September 26, 2019 6:38 AM
0

Sign in to vote

User-719153870 posted

Hi robby32,

robby32
I assume I can still add a click event on the span ??

Of course, add a click event to <span> just like you did to a <input>.

Best Regard,

Yang Shen

Thursday, September 26, 2019 7:08 AM
0

Sign in to vote

User1253338400 posted

Hi ,

Yes got the clicks going .

The arrows seem very small in size , can i increase size and can i align all 3 in the centre of the page ? I have tried text-align on the class but doesnt seem to work ?

Thursday, September 26, 2019 9:27 AM

User-719153870 posted

Hi robby32,

Sorry to have kept you waiting so long.

robby32
can i increase size

Yes, use the font-size attribute of their style to change the arrows' size.

robby32
can i align all 3 in the centre of the page ?

Also yes, it can be done by the text-align, i think you have put this style in an incorrect place.

Please refer to below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        .large {
            font-size: 17px;
        }

        .form-inline {
            text-align:center;
        }
    </style>
    <script>
        function show() {
            alert('1');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="form-inline">
            <div class="form-group">
                <select size="5" style="width: 400px"></select>
            </div>
            <div class="form-group" style="text-align: center">
                <span class="large">&#8250;</span><br />
                <span class="large" onclick="show()">&#187;</span><br />
                <span class="large">&#8249;</span><br />
                <span class="large">&#171;</span>
                <%--<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" /><br />
                        <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" /><br />
                        <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" /><br />
                        <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />--%>
            </div>
            <div class="form-group">
                <select size="5" style="width: 400px"></select>
            </div>
        </div>
    </form>
</body>
</html>

Hope this could help.

Best Regard,

Yang Shen

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, September 27, 2019 1:19 AM

Answered by:

How can I align control vertically in html ?

Question

Answers

robby32

robby32

All replies

robby32

robby32

robby32