Html 两个不同列中的元素

我有一张图片，在左边我想添加三段。 这是我的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>

交通灯组件
hii1

HIIIIII

提比乌尔

它会显示它们，但是否可以将它们移动到中心

---

非常感谢所有帮助。

添加CSS属性

文本对齐：居中将使段落和图像像这样居中


a区，b区{
文本对齐：居中；
}

交通灯组件
hii1

HIIIIII

提比乌尔

哪些元素要居中？和bI已经编辑了我的代码段，您可以试着运行它，看看它现在是否工作。现在它们在居中，但它们是在彼此的顶部。因此，您希望所有文本和图像彼此对齐，或者只是分区a和分区b。