Question

我试图创建按钮，我有一个父div将所有其他div保持在一起。与父div相关的东西，它创建了自己的宽度，它只是不会在其他div周围创建一个自动宽度。

我只想完美地居中所有的按钮/ div，而父div的宽度阻止了我。

任何帮助都会很棒，谢谢!!

＆＃13;

<style>
h1.helph1 {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 100;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: #e3e3e3 solid 1px;
}

.toplinks div, .middlelinks div, .bottomlinks div {
    float: left;
    width: 250px !important;
}

.helpparent .toplinks div, .middlelinks div, .bottomlinks div{
    background: #2fb796;
    padding: 10px;
    margin: 10px;
    color: white;
    font-family: Montserrat;
    text-align: center;
}

.helpparent  {
    width: 66.1%;
    margin: 0 auto;
}
</style>

＆＃13;

<html>
<h1 class="helph1">Forum Help Center</h1>

<div class="helpparent">
  
  <div class="toplinks">  
    <a href="https://www.youtube.com/"><div class="announcementhelp">Announcements</div></a>
	<a href="https://www.youtube.com/"><div class="gettingstartedhelp">Getting Started</div></a>
	<a href="https://www.youtube.com/"><div class="gasrhelp">GASR 101</div></a>
  </div>
  
   <div class="seperator" style="clear:both;"></div>  
  
  <div class="middlelinks">   
	<a href="https://www.youtube.com/"><div class="forumshophelp">Forums and Shops</div></a>
	<a href="https://www.youtube.com/"><div class="rulesdmcahelp">Community &amp; DMCA Guidelines</div></a>
	<a href="https://www.youtube.com/"><div class="sandrhelp">Support &amp; Report System</div></a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>  
  
  <div class="bottomlinks">   
	<a href="https://www.youtube.com/"><div class="eventhelp">Forum Events</div></a>
	<a href="https://www.youtube.com/"><div class="storehelp">GASR Store</div></a>
	<a href="https://www.youtube.com/"><div class="profilehelp">Your Profile &amp; Settings</div></a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>    
  
  </div>

</html>

＆＃13;

Answer 1

您可以删除class Person{ private int num = 1; }课程的宽度，并添加.help-parent display: flex; flex-direction: column;以使div居中。但是，您必须删除align-items: center;上的float才能生效。另外，由于删除了.toplinks div, .middlelinks div, .bottomlinks div，链接上的float似乎又回来了，因此我将text-decoration添加到了您的text-decoration: none;代码中。

＆＃13;

<a>

＆＃13;

<style>h1.helph1 {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: 100;
  padding-bottom: 40px;
  padding-top: 20px;
  border-bottom: #e3e3e3 solid 1px;
}

.toplinks div,
.middlelinks div,
.bottomlinks div {
  width: 250px !important;
}

a {
  text-decoration: none;
}

.helpparent .toplinks div,
.middlelinks div,
.bottomlinks div {
  background: #2fb796;
  padding: 10px;
  margin: 10px;
  color: white;
  font-family: Montserrat;
  text-align: center;
}

.helpparent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>

＆＃13;

Answer 2

尝试摆脱a中的div元素。这个div是不必要的，并且没有可点击的区域。

之后，您可以选择使用flex来对齐您的内容

＆＃13;

h1.helph1 {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 100;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: #e3e3e3 solid 1px;
}

.toplinks a, .middlelinks a, .bottomlinks a {
    width: 250px !important;
}

.helpparent .toplinks a, .middlelinks a, .bottomlinks a{
    background: #2fb796;
    padding: 10px;
    margin: 10px;
    color: white;
    font-family: Montserrat;
    text-align: center;
}

.toplinks, .middlelinks, .bottomlinks  {
  display: flex;
  flex-direction: column;
  align-items: center;
}

＆＃13;

<h1 class="helph1">Forum Help Center</h1>

<div class="helpparent">
  
  <div class="toplinks">  
    <a href="https://www.youtube.com/">Announcements</a>
	<a href="https://www.youtube.com/">Getting Started</a>
	<a href="https://www.youtube.com/">101</a>
  </div>
  
   <div class="seperator" style="clear:both;"></div>  
  
  <div class="middlelinks">   
	<a href="https://www.youtube.com/">Forums and Shops</a>
	<a href="https://www.youtube.com/">Community &amp; DMCA Guidelines</a>
	<a href="https://www.youtube.com/">Support &amp; Report System</a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>  
  
  <div class="bottomlinks">   
	<a href="https://www.youtube.com/">Forum Events</a>
	<a href="https://www.youtube.com/">GASR Store</a>
	<a href="https://www.youtube.com/">Your Profile &amp; Settings</a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>    
  
  </div>

＆＃13;

宽度不会从Div中删除

2 个答案: