垂直和水平一个div

我真的需要你的帮助中心按钮，垂直和水平一个div

如何可以在下面的HTML & CSS标记进行修改，使得包含在事业部（“盒子d”）的按钮垂直居中以及水平？

下面是HTML CSS &问题：

<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
* { 
    font-family: Segoe UI; 
    font-size: 9pt; 
    box-sizing: border-box; 
} 
#main { 
    border: 1px solid rgb(180,180,180); 
    width: 800px; 
    height: 650px; 
} 
#boxA { 
    padding-top: 7px; 
    padding-bottom: 7px; 
    padding-left: 3px; 
    border-bottom: 1px solid rgb(180,180,180); 
} 
#boxB { 
    height: 573px; 
    width: 200px; 
    border: 0; 
    float: left; 
} 
#boxC { 
    background: rgb(240,240,240); 
    height: 573px; 
    width: 598px; 
    border-left: 1px solid rgb(180,180,180); 
    border-top: 0; 
    border-bottom: 0; 
    border-right: 0; 
    display: inline-block; 
} 
#boxD { 
    background: rgb(240,240,240); 
    border-top: 1px solid rgb(180,180,180); 
    height: 44px; 
    text-align: center; 
} 
#menu { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#menu li { 
    padding: 4px; 
     border: 1px solid #FFF; 
} 
#menu li:hover { 
    cursor: pointer; 
} 
.selected { 
    background: rgb(51,153,255); 
    color: #FFF; 
    border: 1px solid #FFF; 
    font-weight: bold; 
} 
.hidden{ display:none; } 


.item { 
    width: 100%; 
    height: 100%; 
} 


input[type="button"] 
{ 
    cursor:pointer; 
    border: 1px solid #707070; 
    background-color: #F0F0F0; 
    border-radius: 4px; 
    box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD; 
    background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%); 
    padding: 3px 6px; 
    width: 75px; 
} 

input[type="button"]:hover 
{ 
    cursor:pointer; 
    background-color: #EAF6FD; 
    border: 1px solid #3C7FB1; 
    box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5; 
} 

input[type="button"][disabled], input[type="button"][disabled]:hover 

{ 
    border: 1px solid #ADB2B5; 
    text-shadow: 1px 1px #fff; 
    cursor:default; 
    background-color: #F4F4F4; 
    box-shadow: inset 0 1px 2px #fff; 
} 
</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#menu li").click(function(){ 
     var $li = $(this); 
     var selector = $li.data("show"); 
     $('.item').addClass('hidden'); 

     $('ul').children().removeClass('selected'); 

     $(selector).removeClass("hidden"); 
     $(this).addClass("selected"); 

     //alert($(this).attr("class").split(' ')) 
    }); 

    $("#menu li").eq(0).click(); 

}); 
</script> 

</head> 

<body> 

<div id="main"> 

    <div id="boxA"><b>Application Title</b></div> 

    <div id="boxB"> 
     <ul id="menu"> 
      <li data-show="#1">Menu Item 1</li> 
      <li data-show="#2">Menu Item 2</li> 
      <li data-show="#3">Menu Item 3</li> 
     </ul> 
    </div> 


    <div id="boxC"> 

     <div id="1" class="hidden item"> 
      <b>Content Tab 1</b> 
     </div> 

     <div id="2" class="hidden item"> 
      Content Tab 2 
     </div> 

     <div id="3" class="hidden item"> 
      Content Tab 3 
     </div> 

    </div> 

     <div id="boxD"> 

      <div style="display: table-cell; vertical-align: middle;"> 
       <input type="button" value="Search" class="btn" disabled> 
       <input type="button" value="Save" class="btn" disabled> 
       <input type="button" value="Add" class="btn" disabled> 
       <input type="button" value="Clear All" class="btn"> 
       <input type="button" value="Delete" class="btn" disabled> 
       <input type="button" value="Export" class="btn" disabled> 
       <input type="button" value="Recall" class="btn" disabled> 
      </div> 

     </div> 

</div> 

</body> 

</html>

来源

2015-11-13 BobbyJones

如果您更新#boxD这样的：

#boxD { 
    display: table; 
    width: 100%;

示例代码：

$(document).ready(function() { 
 

 
    $("#menu li").click(function(){ 
 
     var $li = $(this); 
 
     var selector = $li.data("show"); 
 
     $('.item').addClass('hidden'); 
 

 
     $('ul').children().removeClass('selected'); 
 

 
     $(selector).removeClass("hidden"); 
 
     $(this).addClass("selected"); 
 

 
     //alert($(this).attr("class").split(' ')) 
 
    }); 
 

 
    $("#menu li").eq(0).click(); 
 

 
});

* { 
 
    font-family: Segoe UI; 
 
    font-size: 9pt; 
 
    box-sizing: border-box; 
 
} 
 
#main { 
 
    border: 1px solid rgb(180,180,180); 
 
    width: 800px; 
 
    height: 650px; 
 
} 
 
#boxA { 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    padding-left: 3px; 
 
    border-bottom: 1px solid rgb(180,180,180); 
 
} 
 
#boxB { 
 
    height: 573px; 
 
    width: 200px; 
 
    border: 0; 
 
    float: left; 
 
} 
 
#boxC { 
 
    background: rgb(240,240,240); 
 
    height: 573px; 
 
    width: 598px; 
 
    border-left: 1px solid rgb(180,180,180); 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    border-right: 0; 
 
    display: inline-block; 
 
} 
 
#boxD { 
 
    display: table; 
 
    width: 100%; 
 
    background: rgb(240,240,240); 
 
    border-top: 1px solid rgb(180,180,180); 
 
    height: 44px; 
 
    text-align: center; 
 
} 
 
#menu { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#menu li { 
 
    padding: 4px; 
 
     border: 1px solid #FFF; 
 
} 
 
#menu li:hover { 
 
    cursor: pointer; 
 
} 
 
.selected { 
 
    background: rgb(51,153,255); 
 
    color: #FFF; 
 
    border: 1px solid #FFF; 
 
    font-weight: bold; 
 
} 
 
.hidden{ display:none; } 
 

 

 
.item { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 

 
input[type="button"] 
 
{ 
 
    cursor:pointer; 
 
    border: 1px solid #707070; 
 
    background-color: #F0F0F0; 
 
    border-radius: 4px; 
 
    box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD; 
 
    background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%); 
 
    padding: 3px 6px; 
 
    width: 75px; 
 
} 
 

 
input[type="button"]:hover 
 
{ 
 
    cursor:pointer; 
 
    background-color: #EAF6FD; 
 
    border: 1px solid #3C7FB1; 
 
    box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5; 
 
} 
 

 
input[type="button"][disabled], input[type="button"][disabled]:hover 
 

 
{ 
 
    border: 1px solid #ADB2B5; 
 
    text-shadow: 1px 1px #fff; 
 
    cursor:default; 
 
    background-color: #F4F4F4; 
 
    box-shadow: inset 0 1px 2px #fff; 
 
}

<div id="main"> 
 

 
    <div id="boxA"><b>Application Title</b></div> 
 

 
    <div id="boxB"> 
 
     <ul id="menu"> 
 
      <li data-show="#1">Menu Item 1</li> 
 
      <li data-show="#2">Menu Item 2</li> 
 
      <li data-show="#3">Menu Item 3</li> 
 
     </ul> 
 
    </div> 
 

 

 
    <div id="boxC"> 
 

 
     <div id="1" class="hidden item"> 
 
      <b>Content Tab 1</b> 
 
     </div> 
 

 
     <div id="2" class="hidden item"> 
 
      Content Tab 2 
 
     </div> 
 

 
     <div id="3" class="hidden item"> 
 
      Content Tab 3 
 
     </div> 
 

 
    </div> 
 

 
     <div id="boxD"> 
 

 
      <div style="display: table-cell; vertical-align: middle;"> 
 
       <input type="button" value="Search" class="btn" disabled> 
 
       <input type="button" value="Save" class="btn" disabled> 
 
       <input type="button" value="Add" class="btn" disabled> 
 
       <input type="button" value="Clear All" class="btn"> 
 
       <input type="button" value="Delete" class="btn" disabled> 
 
       <input type="button" value="Export" class="btn" disabled> 
 
       <input type="button" value="Recall" class="btn" disabled> 
 
      </div> 
 

 
     </div> 
 

 
</div>

来源

2015-11-13 19:52:34 LGSon

尼斯的答案！我不认为要做显示：表格。 –

谢谢。已经有了“表格单元”内联风格，所以它似乎是要走的路 – LGSon

要居中的按钮，他们的父母div，你可以在btn类做margin: 0 auto。虽然，如果您创建了一个新的CSS类，那么它可能会更好，然后将其分配给您的按钮;您可能希望稍后创建其他按钮，而这些按钮可能不需要与其容器中心对齐。

请尝试以下操作：

将一个类添加到您的CSS。

.centeredBtn { 
    margin: 0 auto; 
}

然后，在你的HTML标记：

<input type="button" value="Search" class="btn centeredBtn" disabled>

来源

2015-11-13 19:52:14

这应该很容易做的伎俩：

#boxD { 
    width: 50%; 
    height: 50%; 
    overflow: auto; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

来源

2015-11-13 19:56:32

垂直和水平一个div

回答

相关问题