css 我有一个Blazor服务器应用程序,在我的剃刀页面中，我无法将表格行中的选择框垂直居中对齐,可能是什么问题？

1bqhqjot 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(93)

我已经尝试在css和select对象中使用vertical-align：middle，但是选择框仍然与表格行的底部对齐。
CSS档案

.td_button_bar {
background-color: #eaf2f8;
border: none;
left:10px;
margin-left:10px;
vertical-align:middle;
}

.tr_button_bar {
max-height: 60px;
margin-top: 0px;
top: 0px;
vertical-align: middle;
}

Razor代码

<table class="page_header">
<tr>
    <td class="page_header">&emsp;&#9432;Info:&emsp; @TagService.Message_CNC_Status</td>
</tr>
<tr class="tr_button_bar">
    <td class="td_button_bar" align="left" >
        
        <button class="button_1" disabled="@TagService.IsDisabled_Read_Drive_Monitor" @onclick="Read_Drive_Monitor"><img class="button_image" src="images/play.svg"><br>Start</button>
        <button class="button_1" disabled="@TagService.IsDisabled_Stop_Drive_Monitor" @onclick="Stop_Drive_Monitor"><img class="button_image" src="images/stop.svg"><br>Stop</button>
        <select style="width:150px; height:30px ;vertical-align:middle;display:inline-block" value="@TagService.Drive_Monitor_selected_AX_No" class="Dep" disabled="@TagService.IsDisabled_Drive_Monitor_selected_AX" @onchange="func_AX_select" @onclick="Read_NC_AX_List_MD10000">
            <option value="-1">--Select AX--</option>
            @for (int j = 0; j < 31; j++)

            {
                var jj = j;
                var kk = j + 1;
                if (Deltalogic.NC_AX_List_MD10000[j] == "")
                {
                    break;
                }
                <option value=@kk>@Deltalogic.NC_AX_List_MD10000[j]</option>
            }

        </select>
    </td>
  
</tr>

css

来源：https://stackoverflow.com/questions/74442947/i-have-a-blazor-server-app-in-my-razor-page-i-cannot-align-my-selectbox-in-a-ta

1条答案

按热度按时间

jbose2ul1#

尝试使用内置的Bootstrap类：并应用align-self-center
下面是一个jsFiddle：https://jsfiddle.net/maciekn/Lx40s7wk/

<table class="container">
    <tr>
        <td class="page_header">&emsp;&#9432;Info:&emsp; </td>
    </tr>
    <tr class="tr_button_bar">
        <td class="td_button_bar" align="left" >
            <div class="row">
                <div>
                    <button class="button_1" ><br>Start</button>
                </div>
                <div>
                    <button class="button_1" ><br>Stop</button>
                </div>
                <div class="align-self-center">
                    <select style="width:150px; height:30px ;vertical-align:middle;display:inline-block">
                    <option value="-1">--Select AX--</option>
                    @for (int j = 0; j < 31; j++)

                    {
                        var jj = j;
                        var kk = j + 1;

                        <option value=@kk></option>
                    }
                    </select>
                </div>
            </div>
        </td>
    </tr>
</table>

赞(0）回复(0）举报 2022-11-19

我来回答

css 我有一个Blazor服务器应用程序,在我的剃刀页面中，我无法将表格行中的选择框垂直居中对齐,可能是什么问题？

1条答案

相关问题

热门标签

最新问答