Wie kann ich 3 Taste horizontal und vertikal ausgerichtet

Ich möchte, dass diese 3 Tasten vertikal und horizontal ausgerichtet sind, aber wenn ich versuche, sie auszurichten, fällt die letzte Taste und ich weiß nicht warum. Dies ist der ursprüngliche Code ohne Ausrichtung, kann jemand mir helfen?Wie kann ich 3 Taste horizontal und vertikal ausgerichtet

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

\t <body> 
 
\t <div class="pannello rosso"> 
 
    \t \t <button>TS3</button> 
 
\t </div> 
 

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

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

 
\t </body>

Dank!

PS: Wenn Sie die Geige

Quelle

2017-06-03 Lafa

Verwenden flex auf dem Elternteil mit justify-content: center; align-items: center; min-height: 100vh; schreiben können das Element zumindest die Höhe Browser, horizontal und vertikal ausgerichtet zu machen. Dann entfernen margin: auto von .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; 
 
}

\t <body> 
 
\t <div class="pannello rosso"> 
 
    \t \t <button>TS3</button> 
 
\t </div> 
 

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

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

 
\t </body>

Quelle

2017-06-03 22:18:07

danke sehr mutch, aber ich möchte die 3 Tasten in Linie ausgerichtet sind nicht in verticaly – Lafa

@Lafa aktualisiert meine Antwort - wie das ? –

Ich änderte absichtlich Ihr Markup und CSS ein wenig, machte es einfacher und dann geändert Ihre pannello Regel wie diese

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

Hinweis, da die Regeln .rosso .pannello, .bianco .pannello und .verde .pannello galten nicht für irgendein Element t, löschte ich sie einfach

Stapel 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>

Quelle

2017-06-03 22:42:16 LGSon

Wie kann ich 3 Taste horizontal und vertikal ausgerichtet

Antwort

Verwandte Themen