Ergebnis 1 bis 3 von 3

Thema: Text mittig ausrichten und Bild vorstellen - Ich verzweifle

  1. #1
    HTML Newbie
    Registriert seit
    10.05.2016
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Text mittig ausrichten und Bild vorstellen - Ich verzweifle

    Hallo liebes Forum

    ich habe mich heute hier angemeldet, da ich vor einem für mich unlösbarem Problem stehe, was wahrscheinlich für die Leute hier eine Kleinigkeit ist.

    Folgendes möchte ich gerne umsetzen:

    Ich möchte einen Info Block in einer Webseite einbauen, welcher sich dynamisch an die Fenstergröße anpasst und welcher einen grauen Hintergrund, sowie oben und unten einen 1px Border in dunklerem Grau hat.

    Dazu nutze ich folgende CSS

    Code:
    .info-block {    
    background: #f9f9f9;    
    border-bottom: 1px solid #e1e1e1;    
    border-top: 1px solid #e1e1e1;    
    font-family: Verdana, Arial, Tahoma, sans-serif;    
    font-size:27px;    
    font-weight: 200 !important;    
    color: #888;    
    height: 80px;    
    padding: 10px 0 0 0;
    }
    Nun soll der Text immer mittig sitzen, allerdings davor eine Infografik haben. Im Prinzip scheitere ich nur noch an dem Punk, dass die Grafik nie links vom Text sitzt, sondern der Text mittig, aber die Grafik hängt immer links. Nehme ich das float:left raus, so sitzt die Grafik über dem Text.

    Folgenden HTML Code habe ich bisher

    HTML-Code:
    <div class="info-block"><img alt="" src="http://localhost/test/mediafiles/Bilder/telephone.png" style="width: 50px; height: 50px; float: left;" /><p><h3>Dies ist ein Infoblock<br />Schicke uns eine Email</h3></p>
    <div class="clearfix"></div></div>
    Kann mir hier bitte jemand behilflich sein und mir unter die Arme greifen, sodass der Info Text immer mittig sitzt und die Graphic direkt links neben dem Text steht?
    Ich habe schon dutzende Tutorials bezüglich Text umfließt Grafik durchprobiert und da hat es mit dem Beispielcode auch funktioniert, allerdings sehe ich entweder den Wald vor lauter Bäumen nicht mehr, oder aber ich schnalle es einfach nicht.

    Vielen lieben Dank
    BoneCrusher
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Text mittig ausrichten und Bild vorstellen - Ich verzweifle

    Versuch's mal so
    Code:
    .info-block {   
     text-align:center;
     background: #f9f9f9;    
     border:1px solid #e1e1e1;    
     font-size:27px;    
     color: #888;    
    }
    
    
    .info-block h3 {
     display:inline-block;
     padding:10px 50px;
     background:url(feuerwehr.svg) no-repeat left center #ada;
     background-size:50px 50px;
    }
     <div class="info-block"><h3>Dies ist ein Infoblock <br>Schicke uns eine Email</h3></div>

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    10.05.2016
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Text mittig ausrichten und Bild vorstellen - Ich verzweifle

    Vielen lieben Dank, das hat auf Anhieb sofort funktioniert.

    Nochmal danke

Ähnliche Themen

  1. Text in einem Blockelement mittig ausrichten
    Von dih im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.06.2015, 11:07
  2. CSS Menü mittig ausrichten
    Von donrijo im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 13.04.2013, 00:23
  3. Bild mittig in div ausrichten
    Von Kämpfer im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.11.2009, 17:20
  4. Tiltviewer - lässt sich nicht mittig ausrichten.
    Von cadoham im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.09.2009, 19:02
  5. Seite vertikal mittig ausrichten
    Von madosch im Forum HTML & CSS Forum
    Antworten: 26
    Letzter Beitrag: 31.05.2006, 12:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •