2016-07-25 6 views
0

Ich habe mich gerade hier registriert und ich bin auf der Suche nach ein wenig Hilfe.bullet point nicht bleibend zentral wenn resizing fluid container

Ich arbeite an meiner Tribut-Seite für freies Code-Lager und die Punkte, die ich habe, bleiben nicht zentral, wenn die Größe des Flüssigkeitsbehälters geändert wird.

Hat jemand irgendwelche Ideen? Hier enter image description here

ist ein Link zu meinem Code Stift so können Sie code pen

body { 
 
    margin: 60px 60px 60px 60px; 
 
    font-size: 100%; 
 
} 
 

 
h1 { 
 
    font-family: lobster, Monospace; 
 
    text-align: center; 
 
    font-size: 5em; /* 80px/16=5em */ 
 
    text-decoration: underline; 
 
    margin-bottom: 60px; 
 
    border-style: ; 
 
} 
 

 
blockquote { 
 
    font-size: 20px; 
 
    font-family: 'Puritan', cursive; 
 
    color: black; 
 
} 
 

 
.img-r { 
 
    /* other definitions */ 
 
    width:100%; 
 
} 
 

 
.padding { 
 
    padding-top: 20px; 
 
} 
 

 
li { 
 
    font-family: Monospace; 
 
    text-align: center; 
 
    font-size: 2em; /* 80px/16=5em */ 
 
    text-decoration: ; 
 
    margin-bottom: 60px; 
 
    border-style: ; 
 
} 
 

 
@media (max-width: 700px){ 
 
    .jumbotron p { 
 
    font-size: 5px; 
 
    } 
 
}
<head> 
 
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
 
</head> 
 
<h1> 
 
Dame Stephanie "Steve" Shirley 
 
</h1> 
 
<div class="container-fluid"> 
 
    <div class="jumbotron"> 
 
     <div class="row"> 
 
      <div class="col-xs-12"> 
 
       <div class="row"> 
 
        <div class="col-xs-9 col-md-6"> 
 
         <h2 style="color: #645340; text-decoration: underline;" class="text-center">About 
 
      Dame Stephanie "Steve" Shirley </h2> 
 
         <ul class="text-center"> 
 
          <li class="text-center"><em>Dame Stephanie "Steve" Shirley was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em> 
 
          </li> 
 
          <li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em> 
 
          </li> 
 
          <li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em> 
 
          </li> 
 
          <li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em> 
 
          </li> 
 
          <li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em> 
 
          </li> 
 
          <li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em> 
 
          </li> 
 
          <li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em> 
 
          </li> 
 
          <li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em> 
 
          </li> 
 
          <li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em> 
 
          </li> 
 
          <li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em> 
 
          </li> 
 
        </div> 
 
        <div class="col-xs-3 col-md-6"> 
 
         <div class="thumbnail"> 
 
          <img class="img-responsive img-r center-block" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg"> 
 
          <div> 
 
           <p class="text-center padding"> 
 
            Dame Stephanie "Steve" Shirley 
 
           </p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Viel schätzte einen Blick darauf werfen,

R

+1

Können Sie das Problem weiter ausführen? In Ihrem CodePen-Beispiel scheinen die Aufzählungszeichen in ihrer Spalte zentriert zu bleiben, wenn der Bildschirm auf eine mobile Größe verkleinert wird. Sie sehen etwas dezentriert aus, weil die Säule rechts etwas Platz einnimmt. Möchten Sie auf Mobilgeräte in eine Spalte mit voller Breite wechseln? – Josh

+0

Sie funktionieren gut. Du willst sie wahrscheinlich nicht auf der linken Seite haben, oder? Die Verwendung einer Liste mit einem solchen Stil und zentrierter Textausrichtung ist ein bisschen hässlich. – actimel

+0

Aber ich stimme @Josh zu, dass die Frage einen falschen Titel hat. Die Kugeln sind immer nach links ausgerichtet. Oder siehst du es etwas anderes? – actimel

Antwort

0

Die Liste ist nicht mit dem Titel ausgerichtet, weil die Liste eine linke Auffüllung hat, a s sollte es, so dass die Kugeln sichtbar sind und es gibt Abstände zwischen ihnen und dem Text. Sie können entweder die 40 Pixel der linken Füllung im Element ul.text-center entfernen oder dem Titel 40 Pixel linker Füllung hinzufügen.