如何将3个按钮水平和垂直对齐

时间：2017-06-03 22:15:46

标签： html css html5 css3 alignment

我希望这3个按钮垂直和水平对齐，但是当我尝试对齐它们时，最后一个按钮会掉下来，我不知道为什么。这是没有对齐的原始代码，有人可以帮助我吗？

＆＃13;
＆＃13; 
@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';

body {
  background: url(https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
button {
  color:#454545;
  width: 200px;
  background:transparent;
  border-width:2px;
  border-style: solid;
  border-color: #454545;
  position:relative;
  margin:1em;
  display:inline-block;
  padding:0.5em 1em;
  transition:all 0.3s ease-in-out;
  text-align:center;
  font-family:comfortaa;
  font-weight:bold
}

button:before, button:after{
  content:'';
  display:block;
  position:absolute;
  border-color:#454545;
  box-sizing:border-box;
  border-style:solid;
  width:1em;height:1em;
  transition:all 0.3s ease-in-out
}

button:before {
  top:-6px;left:-6px;
  border-width:2px 0 0 2px;
  z-index:5;
}

button:after {
  bottom:-6px;
  right:-6px;
  border-width:0 2px 2px 0;
}

button:hover:before, button:hover:after {
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  border-color:#fff
}

button:hover {
  color:#353535;
  background-color:#fff;
  border-color:#fff
}

.pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}


.rosso button {
  color:#ff0c0c;
  border-color:#ff0c0c
}

.rosso button:before, .rosso button:after  {
  border-color:#ff0c0c
}

.rosso button:hover:before, .rosso button:hover:after {
  border-color:#ff0c0c;
}

.rosso button:hover {
  color:#fff;
  background-color:#ff0c0c;
  border-color:#ff0c0c;
}

.rosso .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

.bianco button {
  color:#e8e8e8;
  border-color:#e8e8e8
}

.bianco button:before, .bianco button:after  {
  border-color:#e8e8e8
}

.bianco button:hover:before, .bianco button:hover:after {
  border-color:#e8e8e8;
}

.bianco button:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.bianco .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

.verde button {
  color:#e8e8e8;
  border-color:#e8e8e8
}

.verde button:before, .bianco button:after  {
  border-color:#e8e8e8
}

.verde button:hover:before, .bianco button:hover:after {
  border-color:#e8e8e8;
}

.verde button:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.verde .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}
＆＃13; 
	<body>
	<div class="pannello rosso">
  		<button>TS3</button>
	</div>

	<div class="pannello bianco">
  		<button>FORUM</button>
	</div>

	<div class="pannello verde">
  		<button>BUYCRAFT</button>
	</div>

	</body>
＆＃13;
＆＃13;
＆＃13;

谢谢！

PS：如果你可以发布小提琴

2 个答案:

答案 0 :(得分：3)

在flex的父级上使用justify-content: center; align-items: center; min-height: 100vh;，使元素至少与浏览器高度相对应，水平和垂直对齐。然后从margin: auto

中删除.pannello 

@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';

body {
  background: url(https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
button {
  color:#454545;
  width: 200px;
  background:transparent;
  border-width:2px;
  border-style: solid;
  border-color: #454545;
  position:relative;
  margin:1em;
  display:inline-block;
  padding:0.5em 1em;
  transition:all 0.3s ease-in-out;
  text-align:center;
  font-family:comfortaa;
  font-weight:bold
}

button:before, button:after{
  content:'';
  display:block;
  position:absolute;
  border-color:#454545;
  box-sizing:border-box;
  border-style:solid;
  width:1em;height:1em;
  transition:all 0.3s ease-in-out
}

button:before {
  top:-6px;left:-6px;
  border-width:2px 0 0 2px;
  z-index:5;
}

button:after {
  bottom:-6px;
  right:-6px;
  border-width:0 2px 2px 0;
}

button:hover:before, button:hover:after {
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  border-color:#fff
}

button:hover {
  color:#353535;
  background-color:#fff;
  border-color:#fff
}

.pannello {
  max-width:960px;
  text-align:center;
  position:relative;
}


.rosso button {
  color:#ff0c0c;
  border-color:#ff0c0c
}

.rosso button:before, .rosso button:after  {
  border-color:#ff0c0c
}

.rosso button:hover:before, .rosso button:hover:after {
  border-color:#ff0c0c;
}

.rosso button:hover {
  color:#fff;
  background-color:#ff0c0c;
  border-color:#ff0c0c;
}

.rosso .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

.bianco button {
  color:#e8e8e8;
  border-color:#e8e8e8
}

.bianco button:before, .bianco button:after  {
  border-color:#e8e8e8
}

.bianco button:hover:before, .bianco button:hover:after {
  border-color:#e8e8e8;
}

.bianco button:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.bianco .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}

.verde button {
  color:#e8e8e8;
  border-color:#e8e8e8
}

.verde button:before, .bianco button:after  {
  border-color:#e8e8e8
}

.verde button:hover:before, .bianco button:hover:after {
  border-color:#e8e8e8;
}

.verde button:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.verde .pannello {
  max-width:960px;
  text-align:center;
  position:relative;
  margin:auto;
}
	<body>
	<div class="pannello rosso">
  		<button>TS3</button>
	</div>

	<div class="pannello bianco">
  		<button>FORUM</button>
	</div>

	<div class="pannello verde">
  		<button>BUYCRAFT</button>
	</div>

	</body>

答案 1 :(得分：1)

我故意改变了你的标记和CSS，使其变得更简单，然后像这样更改了pannello规则

.pannello {
  text-align:center;
  position:relative;
  white-space: nowrap;                 /*  make buttons stay on 1 line  */
  left: 50%;                           /*  position its left edge in the middle  */
  top: 50vh;                           /*  position its top edge in the middle */
  transform: translate(-50%,-50%);     /*  move left/top back half its own width/height  */
}

注意，由于规则.rosso .pannello，.bianco .pannello和.verde .pannello不适用于任何元素，我只是将其删除

Stack snippet

＆＃13;
＆＃13; 
@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';

body {
  background: url(https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
button {
  color:#454545;
  width: 200px;
  background:transparent;
  border: 2px solid #454545;
  position:relative;
  margin:1em;
  padding:0.5em 1em;
  transition:all 0.3s ease-in-out;
  font-family:comfortaa;
  font-weight:bold;
}

button:before, button:after{
  content:'';
  position:absolute;
  border-color:#454545;
  box-sizing:border-box;
  border-style:solid;
  width:1em;height:1em;
  transition:all 0.3s ease-in-out
}

button:before {
  top:-6px;left:-6px;
  border-width:2px 0 0 2px;
}

button:after {
  bottom:-6px;
  right:-6px;
  border-width:0 2px 2px 0;
}

button:hover:before, button:hover:after {
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  border-color:#fff
}

button:hover {
  color:#353535;
  background-color:#fff;
  border-color:#fff
}

.pannello {
  position:relative;
  text-align:center;
  white-space: nowrap;                 /*  make buttons stay on 1 line  */
  left: 50%;                           /*  position its left edge in the middle  */
  top: 50vh;                           /*  position its top edge in the middle */
  transform: translate(-50%,-50%);     /*  move left/top back half its own width/height  */
}

.rosso {
  color:#ff0c0c;
  border-color:#ff0c0c
}
.rosso:before, .rosso:after  {
  border-color:#ff0c0c
}
.rosso:hover:before, .rosso:hover:after {
  border-color:#ff0c0c;
}
.rosso:hover {
  color:#fff;
  background-color:#ff0c0c;
  border-color:#ff0c0c;
}

.bianco {
  color:#e8e8e8;
  border-color:#e8e8e8
}
.bianco:before, .bianco:after  {
  border-color:#e8e8e8
}
.bianco:hover:before, .bianco:hover:after {
  border-color:#e8e8e8;
}
.bianco:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}

.verde {
  color:#e8e8e8;
  border-color:#e8e8e8
}
.verde:before, .bianco:after  {
  border-color:#e8e8e8
}
.verde:hover:before, .bianco:hover:after {
  border-color:#e8e8e8;
}
.verde:hover {
  color:#000;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}
＆＃13; 
<body>
  <div class="pannello">
    <button class="rosso">TS3</button>
    <button class="bianco">FORUM</button>
    <button class="verde">BUYCRAFT</button>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题