CODEWITHSUNDEEP
htmlcssalignment
Lafa
Lafa

Reputation: 523

How can i place 3 button horizontally and vertically aligned

I want these 3 buttons to be vertically and horizontally aligned but when I try to align them, the last button is falling down and I don't know why. This is the original code without alignment, some one can help me?

@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;
}
	<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>

Thanks!

PS: If you can post the fiddle

Upvotes: 2

Views: 1814

Answers (2)

Asons
Asons

Reputation: 87191

I deliberately changed your markup and CSS a little, made it simpler and then changed your pannello rule like this

.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  */
}

Note, since the rules .rosso .pannello, .bianco .pannello and .verde .pannello didn't apply to any element, I simply deleted them

Stack snippet

@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;
}
<body>
  <div class="pannello">
    <button class="rosso">TS3</button>
    <button class="bianco">FORUM</button>
    <button class="verde">BUYCRAFT</button>
  </div>
</body>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

Use flex on the parent with justify-content: center; align-items: center; min-height: 100vh; to make the element at least the browser height, horizontally and vertically aligned. Then remove margin: auto from .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>

Upvotes: 2

Related Questions