Question

我有一张照片，在左侧我想添加三段。这是我的HTML：

<md-toolbar layout-align="center center">
        <h3>Traffic Light Component</h3>
    </md-toolbar>

    <md-grid-list md-cols="2" md-row-height="250px" md-row-width="1000px">

        <div layout="row" layout-margin>
            <div id="a" flex="25">
                <div id="1">
                    <p>hii1</p>
                </div>

                <div id="2">
                    <p>HIIIIII</p>
                </div>

                <div id="3">
                    <p>tybiurhj</p>
                </div>

            </div>

            <div layout="row" layout-xs="column">
                <div id="b">
                    <md-grid-tile class="image">
                        <img ng-src="{{getStatus(caselist)}}" width="80" height="200"/>
                    </md-grid-tile>
                </div>
            </div>
        </div>


    </md-grid-list>
</div>

显示它们但是可以将它们移动到中心吗？

非常感谢所有帮助。

Answer 1

添加CSS属性text-align:CENTER;将使得段落和图像将如此居中。

div#a, div#b{
  text-align:CENTER;  
}

<md-toolbar layout-align="center center">
        <h3>Traffic Light Component</h3>
    </md-toolbar>

    <md-grid-list md-cols="2" md-row-height="250px" md-row-width="1000px">

        <div layout="row" layout-margin>
            <div id="a" flex="25">
                <div id="1">
                    <p>hii1</p>
                </div>

                <div id="2">
                    <p>HIIIIII</p>
                </div>

                <div id="3">
                    <p>tybiurhj</p>
                </div>

            </div>

            <div layout="row" layout-xs="column">
                <div id="b">
                    <md-grid-tile class="image">
                        <img ng-src="{{getStatus(caselist)}}" width="80" height="200"/>
                    </md-grid-tile>
                </div>
            </div>
        </div>


    </md-grid-list>
</div>

两个不同列中的元素

1 个答案: