我无法很好地定位此按钮 [英] I'm having trouble positioning this button nicely
本文介绍了我无法很好地定位此按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经去了一个1.5小时，我只是不能弄清楚一种方式，使它的方式我想要的。我是一个新的web所有的东西，它需要大约的时间（也许更多？）试图得到我想要的东西，并以一种优雅的方式做。
无论如何，我有两个文本框，上面有两个标签，并且在框上居中。我想简单地在它们之间放置一个按钮，并以文本框的高度为中心。
这是尽可能接近我可以让它得到我想要的。我希望左边的文本框移动，使它排队的单词跳转到：，客户：和客户＃：，然后右侧框与右侧相同的距离与下一个按钮也许这个图片的问题是，只有当文本框被显示和展开，如果他们被隐藏，然后面板实际上呈现一半以上的客户＃部分，因为如何我操纵了我猜猜的边距。
这是我尝试使用< div> s
< div style = overflow：auto; margin-top：15px; margin-bottom：10px;>
< div style =width：40％; float：left; margin-left：10px;>
< div>< asp：Label runat =serverID =lblInfoDesc/>< / div>
< div> asp：TextBox ID =txtInfoDescriptionrunat =serverTextMode =MultiLineRows =3MaxLength =500Width =100％/>< / div>
< / div ;
<％ - < div style =position：absolute; margin-top：25px; margin-left：-10px;>< asp：Button ID =Button1runat =serverText =Next/>< / div> - ％>
$ b b< div style =width：40％; float：right; margin-right：16px;>
< div>< asp：Label runat =serverID =lblInfoData/>< / div>
< div> asp：TextBox ID =txtInfoDatarunat =serverTextMode =MultiLineRows =3MaxLength =500Width =100％/>< / div>
< / div ;
< / div>
< div style =margin-bottom：10px;>
< table style = width：100％; margin-bottom：15px;>
< tr style =text-align：center;>
< td>< asp：Label runat =serverID =lblInfoDesc />< / td>
< td>< / td>< td>< / td>< td>< / td>< td>< / td>
< td>< asp：Label runat =serverID =lblInfoData/>< / td>
< / tr>
< tr>
< td style =margin-left：0px;>< asp：TextBox ID =txtInfoDescriptionrunat =serverTextMode =MultiLineRows =3MaxLength =500Width =80 ％/>< / td>
< td>< / td>< td>< / td>< td>< / td>< td>< / td>
< td style =margin-right：10px;>< asp：TextBox ID =txtInfoDatarunat =serverTextMode =MultiLineRows =3MaxLength = =80％/>< / td>
< / tr>
< / table>
< div style =position：inherit; text-align：center; margin-top：-55px; margin-bottom：25px;>
< asp：Button ID =Button2runat =serverText =Next/>
< / div>
< ; / div>
所有这些< td>< / td> ;< td>< / td>< td> 是试图在按钮和文本框之间放置空格，因为我无法获得float或margin，非常感谢！
这是完整的页面源代码：
; asp：Panel ID =pnlCustomerrunat =serverstyle =background-color：#ccccff; width：500px;身高：90％; position：relative;BorderColor =DarkBlueBorderWidth =2px>
< div style = margin-top：10px; margin-left：10px;>
< div style =color：＃003399; font-size：18px; text-align：left;>跳转到：
< asp：DropDownList ID =ddlCategoryrunat =serverAutoPostBack =True
onselectedindexchanged =ddlCategory_SelectedIndexChanged
style =margin-left：40px;/>
< / div>
< / div>
< div style = margin-top：10px; margin-left：10px;>
< div style =color：＃003399; font-size：18px; text-align：left;> Customer：
< asp：DropDownList ID =ddlCustomersListrunat =serverAutoPostBack =true
OnSelectedIndexChanged =ddlCustomersList_SelectedIndexChanged
style = margin-left：35px;/>
< asp：Button ID =btnAddCustomerrunat =serverText =AddOnClick =btnAddCustomer_ClickOnClientClick =return confirm 'Warning：this will redirect you from your page'）;/>
< / div>
< / div>
< div style = ：相对; margin-top：10px; margin-left：10px;>
< div style =color：＃003399; font-size：18px; text-align：left;> Customer＃：
< asp：DropDownList ID =ddlCustomerNumberrunat =serverAutoPostBack =true
OnSelectedIndexChanged =ddlCustomerNumber_SelectedIndexChanged
style =margin-left：20px;/>
< asp：TextBox ID =txtCustomerNumberrunat =serverstyle =margin-left：20px;/>
< asp：Button ID =btnModifyrunat =serverText =ModifyOnClick =btnModify_Click/>
< asp：Button ID =btnCreateNewrunat = serverText =Create NewOnClick =btnCreateNew_Click/>
< asp：Button ID =btnUpdaterunat =serverText =UpdateOnClick =btnUpdate_Click />
< asp：Button ID =btnDeleterunat =serverText =DeleteOnClick =btnDelete_ClickOnClientClick =return confirm（'Do you want to delete the record？ />
< asp：Button ID =btnSaveNewrunat =serverText =SaveOnClick =btnSaveNew_Click/&
< asp：Button ID =btnCancelrunat =serverText =CancelOnClick =btnCancel_Click/>
< / div>
< / div>
<％ - < div style =margin-bottom：10px;>
< table style =position：relative; width：100％; margin-bottom：15px;>
< tr style =text-align：center;>
< td>< asp：Label runat =serverID =lblInfoDesc/>< / td>
< td>< / td>< td>< / td>< td>< / td>< td>< / td>
< td>< asp：Label runat =serverID =lblInfoData/>< / td>
< / tr>
< tr>
< td style =margin-left：0px;>< asp：TextBox ID =txtInfoDescriptionrunat =serverTextMode =MultiLineRows =3MaxLength = =80％/>< / td>
< td>< / td>< td>< / td>< td>< / td>< td>< / td>
< td style =margin-right：10px;>< asp：TextBox ID =txtInfoDatarunat =serverTextMode =MultiLineRows =3MaxLength = =80％/>< / td>
< / tr>
< / table>
< div style =position：inherit; text-align：center; margin-top：-55px; margin-bottom：25px;>
< asp：Button ID =Button2runat =serverText =Next/>
< / div>
< / div> - ％>
< div style =position：relative; overflow：auto; margin-top：15px; margin-bottom：10px;>
< div style =text-align：center; margin-bottom：-20px;>
< asp：Button ID =btnNextInforunat =serverText =Next/>
< / div>
< div style =width：40％; float：left; margin-left：10px;>
< div>< asp：Label runat =serverID =lblInfoDesc/>< / div>
< div>< asp：TextBox ID =txtInfoDescriptionrunat =serverTextMode =MultiLineRows =3MaxLength =500Width =100％/> div>
< / div>
< div style =width：40％; float：right; margin-right：16px;>
< div>< asp：Label runat =serverID =lblInfoData/>< / div>
< div>< asp：TextBox ID =txtInfoDatarunat =serverTextMode =MultiLineRows =3MaxLength =500Width =100％/> div>
< / div>
< / div>
< div style =margin-top：-20px; position：absolute; font-size：12px;>< asp：Label runat =serverID =lblErrorMessage/ >< / div>
< / asp：Panel>
解决方案
看起来这更像是一个CSS和HTML问题比ASP.Net问题。
要清楚，使用CSS在其父级中垂直居中并不容易，诀窍是：
- 父元素必须具有相对位置或绝对位置。
- 子元素必须包含在div或可定位的对象中。
- 孩子必须有顶部：50％
- 孩子必须声明身高。
- =它的高度/ 2 * -1。
（
< style>
div.textboxArea {
text-align：center;
float：left;
width：40％;
height：400px;
}
.textboxArea textarea {
width：80％;
height：400px;
}
.centerMeVertically div {
position：absolute;
top：50％;
vertical-align：middle;
height：30px;
width：100％;
margin-top：-15px;
text-align：center;
}
div.centerMeVertically {
float：left;
width：20％;
text-align：center;
height：400px;
position：relative;
}
p {
height：35px;
margin：-35px 0 0 0;
}
.container {
margin-top：35px;
}
< / style>
< div class =container>
< div style =width：100％;>
< div class =textboxArea>
< p>标签1< / p>
< textarea>< / textarea>
< / div>
< div class =centerMeVertically>
< div>< button> Button2< / button>< / div>
< / div>
< div class =textboxArea>
< p>标签2< / p>
< textarea>< / textarea>
< / div>
< / div>
< / div>
编辑：看过修订后的问题后，我已将我的答案修改为只有textarea垂直。
你必须做一些愚蠢的CSS技巧与顶部边距，但它完成工作。还要注意容器div。这是为了确保如果您在标记中放置此代码段上方，它不会被标签重叠。
I've been goin at it now for an 1.5hrs and I just can't figure out a way to make it the way I want. I'm kind of new with all things web, and it takes about as much time (maybe more?) trying to get things where I want and doing it in a way that is elegant.
Anyways, I have two text boxes, with two labels above them and centered over the box. I want to simply put a button in between them and about centered with the textboxes' height.
This is as close as I can make it get to what I want. I would like the left textbox moved over so it lines up with the words "Jump To:, "Customer:," and "Customer #:" and then have the right box be the same distance on the right with the Next button maybe a just 10px higher but still centered as it is. The problem with this picture is that it only works when the text boxes are shown and expanded, if they are hidden, then the panel actually renders half-way above the Customer # part because of how I manipulated the margins I'm guessing.
Here's my attempt with
<div>s<div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;"> <div style="width:40%; float:left; margin-left:10px;"> <div><asp:Label runat="server" ID="lblInfoDesc" /></div> <div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> <%--<div style="position:absolute; margin-top:25px; margin-left:-10px;"><asp:Button ID="Button1" runat="server" Text="Next" /></div>--%> <div style="width:40%; float:right; margin-right:16px;"> <div><asp:Label runat="server" ID="lblInfoData" /></div> <div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> </div>And here's my attempt with table elements
<div style="margin-bottom:10px;"> <table style="position:relative; width:100%; margin-bottom:15px;"> <tr style="text-align:center";> <td><asp:Label runat="server" ID="lblInfoDesc" /></td> <td></td><td></td><td></td><td></td> <td><asp:Label runat="server" ID="lblInfoData" /></td> </tr> <tr> <td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> <td></td><td></td><td></td><td></td> <td style="margin-right:10px;"><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> </tr> </table> <div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;"> <asp:Button ID="Button2" runat="server" Text="Next" /> </div> </div>All of those
<td></td><td></td><td>was to attempt to put spaces between the button and the text boxes because I couldn't get float nor margin to work. Any help would be much appreciated!And here's the complete page source:
<asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px"> <div style="position:relative; margin-top:10px; margin-left:10px;"> <div style="color:#003399; font-size:18px; text-align:left;">Jump To: <asp:DropDownList ID="ddlCategory" runat="server" AutoPostBack="True" onselectedindexchanged="ddlCategory_SelectedIndexChanged" style="margin-left:40px;"/> </div> </div> <div style="position:relative; margin-top:10px; margin-left:10px;"> <div style="color:#003399; font-size:18px; text-align:left;">Customer: <asp:DropDownList ID="ddlCustomersList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomersList_SelectedIndexChanged" style="margin-left:35px;"/> <asp:Button ID="btnAddCustomer" runat="server" Text="Add" OnClick="btnAddCustomer_Click" OnClientClick="return confirm('Warning: This will redirect you from the page');" /> </div> </div> <div style="position:relative; margin-top:10px; margin-left:10px;"> <div style="color:#003399; font-size:18px; text-align:left;">Customer #: <asp:DropDownList ID="ddlCustomerNumber" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerNumber_SelectedIndexChanged" style="margin-left:20px;"/> <asp:TextBox ID="txtCustomerNumber" runat="server" style="margin-left:20px;" /> <asp:Button ID="btnModify" runat="server" Text="Modify" OnClick="btnModify_Click" /> <asp:Button ID="btnCreateNew" runat="server" Text="Create New" OnClick="btnCreateNew_Click" /> <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" /> <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" OnClientClick="return confirm('Do you want to delete the record ?');" /> <asp:Button ID="btnSaveNew" runat="server" Text="Save" OnClick="btnSaveNew_Click" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /> </div> </div> <%-- <div style="margin-bottom:10px;"> <table style="position:relative; width:100%; margin-bottom:15px;"> <tr style="text-align:center";> <td><asp:Label runat="server" ID="lblInfoDesc" /></td> <td></td><td></td><td></td><td></td> <td><asp:Label runat="server" ID="lblInfoData" /></td> </tr> <tr> <td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> <td></td><td></td><td></td><td></td> <td style="margin-right:10px;"><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> </tr> </table> <div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;"> <asp:Button ID="Button2" runat="server" Text="Next" /> </div> </div>--%> <div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;"> <div style="text-align:center; margin-bottom:-20px; "> <asp:Button ID="btnNextInfo" runat="server" Text="Next" /> </div> <div style="width:40%; float:left; margin-left:10px;"> <div><asp:Label runat="server" ID="lblInfoDesc" /></div> <div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> <div style="width:40%; float:right; margin-right:16px;"> <div><asp:Label runat="server" ID="lblInfoData" /></div> <div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> </div> <div style="margin-top:-20px; position:absolute; font-size:12px;"><asp:Label runat="server" ID="lblErrorMessage" /></div> </asp:Panel>解决方案It seems like this is more of a CSS and HTML question than an ASP.Net question.
To be clear, centering things vertically in their parent with CSS isn't easy, the trick is:
- The parent element must have a position:relative or absolute.
- The child must be wrapped in a div or something positionable.
- The child must have the top:50%
- The child must declare a height.
- the child must have a margin-top = it's height / 2 * -1. (basically you move it up by half it's height.)
Try this:
<style> div.textboxArea { text-align:center; float:left; width:40%; height:400px; } .textboxArea textarea { width:80%; height:400px; } .centerMeVertically div { position:absolute; top:50%; vertical-align:middle; height:30px; width:100%; margin-top:-15px; text-align:center; } div.centerMeVertically { float:left; width:20%; text-align:center; height:400px; position:relative; } p { height:35px; margin:-35px 0 0 0; } .container { margin-top:35px; } </style> <div class="container"> <div style="width:100%;"> <div class="textboxArea"> <p>Label 1</p> <textarea></textarea> </div> <div class="centerMeVertically"> <div><button>Button2</button></div> </div> <div class="textboxArea"> <p>Label 2</p> <textarea></textarea> </div> </div> </div>EDIT: Having seen your revised question, I've revised my answer to center the button only to the textarea vertically.
You have to do some stupid CSS tricks with the top-margin, but it gets the job done. Also notice the container div. This is to make sure that if you place anything "above" this snippet in your markup, it doesn't get overlapped by the labels.
这篇关于我无法很好地定位此按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
