Wie zentriere ich div mit zwei Inline-Buttons (css)?

Ich bin derzeit eine Webseite mit Bootstrap Gestaltung und ich habe zwei <a> Tasten miteinander innerhalb des Codes <div class="jumbotron"></div>Wie zentriere ich div mit zwei Inline-Buttons (css)?

Hier ist der HTML-Inline gelegt:

<div class="jumbotron hub-jumbo"> 
     <div class="hub-header"> 
      <div class="container"> 
       <h2 class="txt-white">Jason's Summer Vacation</h2> 
       <p class="txt-white">There doesn't seem to be a description here!</p> 
      </div> 
     </div> 
     <div class="hub-btns"> 
      <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a> 
      <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a> 
     </div> 
    </div>

Und hier ist die CSS der div Verpackung die Tasten und die Tasten selbst:

.hub-btns { 
    display: inline-block; 
    margin: auto; 
} 

.hub-btns .copy-link { 
    border-bottom-color: #EBEBEB; 
} 

.hub-btns .create-drop:hover { 
    background-color: #03a9f4; 
} 

.hub-btns .create-drop:focus { 
    background-color: #03a9f4; 
    border-bottom-color: #0398db; 
} 

.hub-btns a { 
    margin: 0 10px; 
}

Ich bin immer noch nicht gut mit CSS, so dass ich hier etwas offensichtlich offensichtlich vermisse. Aber ich möchte einfach das div nehmen, das die zwei Knöpfe umschließt und dieses div innerhalb des jumbotron div zentriert.

Jede Hilfe wird sehr geschätzt!

Quelle

2016-09-10 Jason Procka

Wenn eine Antwort hilfreich für Sie ist, wäre es nett, wenn Sie diese Antwort akzeptieren würden. – Randy

Es ist ein bisschen schwierig zu helfen, ohne zu sehen, was Sie versuchen zu tun. Das Hinzufügen der text-align: center; innerhalb der .hub-btns sollte ausreichen, um diese Tasten in der Mitte auszurichten.

Auch würde ich wahrscheinlich die margin: 0 10px; zu .hub-btns verschieben, anstatt es die Anker/Schaltflächen direkt anzuwenden.

Wenn Sie ältere Browser nicht unterstützen müssen, versuchen Sie, etwas Zeit in das Erlernen der Grundlagen von flexbox zu investieren. Es macht unser Leben viel einfacher, wenn es darum geht, Dinge "auszurichten".

Quelle

2016-09-10 00:50:06 rafaelbiten

Sehr schön, mein Teamkollege hat das hinzugefügt, als ich das hier überprüft habe. Vielen Dank! –

Ich habe einige Änderungen in einem Klassennamen (entfernte Leerzeichen) vorgenommen und einige Grenzen gesetzt, damit Sie die div-Platzierung besser verstehen. Hier ist der Code:

<html> 
 
<head> 
 
<style> 
 
.jumbotron-hub-jumbo { 
 
margin: 0 auto; 
 
border:2px solid black; 
 
width:300px; 
 
} 
 

 
.hub-btns { 
 
    margin: 0 auto; 
 
\t width:200px; 
 
\t border:2px solid green; 
 
} 
 

 
.hub-btns .copy-link { 
 
    border-bottom-color: #EBEBEB; 
 
} 
 

 
.hub-btns .create-drop:hover { 
 
    background-color: #03a9f4; 
 
} 
 

 
.hub-btns .create-drop:focus { 
 
    background-color: #03a9f4; 
 
    border-bottom-color: #0398db; 
 
} 
 

 
.hub-btns a { 
 
\t width:200px; 
 
\t border: 2px solid red; 
 
    margin: 0 10px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="jumbotron-hub-jumbo"> 
 
     <div class="hub-header"> 
 
      <div class="container"> 
 
       <h2 class="txt-white">Jason's Summer Vacation</h2> 
 
       <p class="txt-white">There doesn't seem to be a description here!</p> 
 
      </div> 
 
     </div> 
 
     <div class="hub-btns"> 
 
      <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a> 
 
      <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a> 
 
     </div> 
 
    </div> 
 
\t </body> 
 
</html>

Im HTML ich nur geänderte Klasse jumbotron hub-jumbo

Ich sehe Sie sagen, Sie sind neu in CSS, haben Sie keine Angst zu sehen, HTML und CSS fusionierten zusammen. Schneide einfach den Style-Part aus und füge ihn in deine style.css ein.

Quelle

2016-09-10 00:59:56

Wie zentriere ich div mit zwei Inline-Buttons (css)?

Antwort

Verwandte Themen