Ich versuche, Text in einem modalen Fenster zu zentrieren, aber ich kann den Text nicht zentrieren.

Mein HTML-Code lautet:

<div ng-init="modalCompassDir()">
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
        </div>
    </div>

    <a class="address">{{address}}</a>

</div>

Mein CSS-Code lautet:

.myModal{
    position:relative;
    display: block;
/*    height:300px;*/
    width:100%;
    text-align:center;
}

.address{
    font-size:1.5em;
    text-align: center;
/*    margin-left:10%;*/

}

Ich kann nicht herausfinden, warum die Textausrichtung in meinem CSS nicht funktioniert, da ich diesem Beispiel folge: http://www.w3schools.com/cssref/pr_text_text-align.asp

Bearbeiten: Ich habe eine der Textausrichtungen in die Mitte geändert. Ich habe einige Dinge getestet und den Code kopiert, bevor ich ihn wieder geändert habe

1
Graeham Broda 18 Aug. 2015 im 16:55

3 Antworten

Beste Antwort

Fügen Sie Ihrem a Element display: block hinzu. Standardmäßig sind a Elemente inline und inline Elemente haben eine Breite, die vom Inhalt abhängt, in dem text-align keine Wirkung hat, es sei denn, Sie legen sie in ihrem Container fest.

.address{
    font-size:1.5em;
    text-align: center;
    display: block;
}

Geige

3
Robin Carlo Catacutan 18 Aug. 2015 im 14:05

Fügen Sie Ihren .address-Link in .myModal ein oder fügen Sie dem übergeordneten div eine Klasse hinzu und verwenden Sie das Textausrichtungszentrum für diese Klasse wie folgt:

HTML

<div ng-init="modalCompassDir()" class='custom_class'>
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
        </div>
    </div>

    <a class="address">{{address}}</a>

</div>

CSS

.myModal{
    position:relative;
    display: block;
/*    height:300px;*/
    width:100%;
    text-align:center;
}

.address{
    font-size:1.5em;
    text-align: right;
/*    margin-left:10%;*/
}
.custom_class{
  text-align:center;
}
0
Ionut Necula 18 Aug. 2015 im 14:03
<div ng-init="modalCompassDir()">
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
        </div>
        <a class="address">{{address}}</a>
    </div>

Legen Sie .address in .myModal

1
Vasiliy Vanchuk 18 Aug. 2015 im 13:59