Wie zentriere ich meine Tasten?

Ich legte eine div um jede Taste und ich legte sie beide auf Inline. Sie wollen nur stapeln, während ich versuche, sie zu zentrieren.Wie zentriere ich meine Tasten?

Das ist mein HTML:

 body{ 
 
\t background-color:black; 
 
    } 
 

 

 
    #light{ 
 
\t margin-left:50%; 
 
\t margin-right:70%; 
 
    } 
 

 
    #dark{ 
 
\t margin-left:50%; 
 
\t margin-right:50%; 
 
\t display:inline-block; 
 
    } 
 
\t 
 

 
    h3{ 
 
\t color:white; 
 
\t font-family:Courier New; 
 
\t font-size:24px; 
 
\t margin-left:500px; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <title>question reality.</title> 
 
    <link rel="stylesheet" type="text/css" href="intro page.css"> 
 
    </head> 
 

 
    <body> 
 

 
    <h3>make your choice.</h3> 
 

 
    <div id="light"><button>Light</button></div> 
 
    <div id="dark"><button>Dark</button></div> 
 

 

 
    </body> 
 
    </html>

Dies ist ein screencap dessen, was diese Sache tut:

Quelle

2017-07-04 Isabella.

Verwendung text-align erfordern: center Immobilien anstelle von Marge links und rechts und geben Sie einen Versuch –

Pls beziehen Sie sich auf diesen Link: https://stackoverflow.com/questions/396145/how-to-vertical-center-a-div-for-all-browsers.Es hat einen besseren Weg, damit umzugehen. – Sujith

Mögliche Duplikate von [Wie vertikal ein div für alle Browser zu zentrieren?] (Https://stackoverflow.com/questions/396145/how-to-vertical-center-a-div-for-all-browsers) – NewUser

Sie haben vergessen, den #light div einstellen inline-block. Aber wahrscheinlich ein besserer Weg, es zu tun, ist nur die beiden Tasten in einem div zu umgeben und geben, dass einige css von text-align:center wie so:

body{ 
 
    background:black; 
 
} 
 
h3{ 
 
    text-align:center; 
 
    color:white; 
 
    font-family:Courier New; 
 
    font-size:24px; 
 
} 
 
.text-center{ 
 
    text-align:center; 
 
}

<h3>Make Your Choice</h3> 
 
<div class="text-center"> 
 
    <button>Light</button> 
 
    <button>Dark</button> 
 
</div>

Quelle

2017-07-04 03:18:00

Versuchen Sie, diesen

CSS

body{ 
background-color:black; 
} 


#light,#dark,h3{ 
    text-align:center; 
} 


h3{ 
color:white; 
font-family:Courier New; 
font-size:24px; 
}

Verwenden Sie text-align: center-Eigenschaft anstelle der Ränder links und rechts

Hope this dies helfen würde ...

Quelle

2017-07-04 03:19:31

Hoffnung hilft:

body{ 
 
    background-color:black; 
 
} 
 
#light{ 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50%; 
 
} 
 
#dark{ 
 
    position: absolute; 
 
    top: 55%; 
 
    left: 50%; 
 
} 
 
h3{ 
 
    color:white; 
 
    font-family:Courier New; 
 
    font-size:24px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>question reality.</title> 
 
    <link rel="stylesheet" type="text/css" href="intro page.css"> 
 
    </head> 
 

 
    <body> 
 

 
    <h3>make your choice.</h3> 
 

 
    <div id="light"><button>Light</button></div> 
 
    <div id="dark"><button>Dark</button></div> 
 

 

 
    </body> 
 
</html>

Quelle

2017-07-04 04:01:30 skm

Platzieren Sie Ihre Schaltflächen in einem Hauptbehälter div, 100% der Breite und der Änderung der Margen Tasten auf automatisch. Das übergeordnete div muss 100% Breite haben und die untergeordneten Elemente werden zentriert, wenn ihr Rand auf auto gesetzt ist. https://codepen.io/DannaB67/pen/KqRoJK

body{ 
    background-color:black; 
    } 
    .main{ 
    width:100%;} 

    #light{ 
    margin:auto; 
    display:inline-block; 
    } 

    #dark{ 
    margin:auto; 
    display:inline-block; 
    } 

    h3{ 
    color:white; 
    font-family:Courier New; 
    font-size:24px; 
    text-align: center; 
    } 

<body> 

    <div align="center" class="main"> 

     <h3>make your choice.</h3> 
     <div id="light"><button>Light</button></div> 
     <div id="dark"><button>Dark</button></div> 

    </div> 

</body>

Quelle

2017-07-04 04:09:32 DanielaB67

können Sie versuchen, zwei Dinge

Verwenden folgenden Styling und entfernen Sie unnötige margin-right

button {  
    margin-top : __px; 
}

Verwenden Position relativ

button { 
    position: relative; 
    top:20%; 
}

Dies wird Ihr Problem

ODER Sie können auch versuchen, erste Antwort auf Vertically centering button using css

Lassen Sie mich lösen, wenn Sie weitere Hilfe

Quelle

2017-07-04 04:10:37

Wie zentriere ich meine Tasten?

Antwort

Verwandte Themen