div内的图像和文本之间的对齐不起作用答案

【问题标题】：alignment not working between image and text inside a divdiv内的图像和文本之间的对齐不起作用
【发布时间】：2020-10-23 11:01:06
【问题描述】：

我正在尝试将图像与标题对齐，但我无法做到这一点。我添加了颜色背景只是为了查看每个元素的位置。

下面是代码：

            <Col className="create-tile">
                <div className="create-style-title">
                    <img
                        src= { TeachIcon }
                        className= "create-icon"
                        alt="TeachIcon"
                    />    
                    <h2>{TextContents.BeATeacher}</h2>
                </div>
                <p>{TextContents.BeATeacherDesc}</p>
                <div className="create-button">
                <BlueButton textSize="13" link_href="/createaclass" text={TextContents.BeATeacherBtn} />
                </div>
            </Col>;

和css：

.create-container {
    margin-top: 3rem;
    margin-bottom: 5rem; 
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.create-container h2 {
    text-align: center;
    height: 51px;
    font-family: Fredoka One;
    font-size: 50px;
    color: #333333;
    background-color: red;
}

.create-section {
    width:100%;
}

.create-icon {
    width:47px;
    height:47px ;
}

.create-style-title {
    background-color: blue;
}

.create-tile {
    display: inline-block;
    left: 12px;
    top: 80px;
    text-align: left;
    width: 200px;
    height: 250px;
    background-color: #ffffff;
}


.create-tile h2 {
    font-family: Source Sans Pro;
    font-weight: bold;
    font-size: 30px;
    line-height: 0.7;
    color: #333333;
    letter-spacing: -0.6px;

}

.create-tile p {
    font-family: Source Sans Pro;
    font-size: 20px;
    line-height: 1.6;
    color: #616161;
    width: 280px;
    height: 85px; 
}

.create-button {
    position: relative;
    left: 0px;
    top: 50px;
}

但它看起来像这样：

而不是这个：

有什么想法吗？我尝试了过去从 stackoverflow 获得的建议，但它仍然无法正常工作。不用担心蓝/红bkg，它真的只是支持放置元素

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

你可以像这样在 create-style-title 类中使用 flexbox

.create-style-title {
    background-color: blue;
    display: flex;
    align-items: center; //This is for vertical align
}

而且应该在同一行

【讨论】：

【解决方案2】：

将你的图片放在 h2 标题标签中并在 css 下面更新

.create-container {
    margin-top: 3rem;
    margin-bottom: 5rem; 
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.create-container h2 {
    text-align: center;
    height: 51px;
    font-family: Fredoka One;
    font-size: 50px;
    color: #333333;
    background-color: red;
}

.create-section {
    width:100%;
}

.create-icon {float:left;
    width:47px;
    height:47px;margin-right:20px
}
 
.create-tile {
    display: inline-block;
    left: 12px;
    top: 80px;
    text-align: left; line-height:47px;
    width: 280px;
    height: 250px;
    background-color: #ffffff;
}


.create-tile h2 {
    font-family: Source Sans Pro;
    font-weight: bold;
    font-size: 30px; 
    color: #333333;
    letter-spacing: -0.6px;

}

.create-tile p {
    font-family: Source Sans Pro;
    font-size: 20px;
    line-height: 1.6;
    color: #616161;
    width: 280px;
    height: 85px; 
}

.create-button {
    position: relative;
    left: 0px;
    top: 50px;
}

.create-container {
    margin-top: 3rem;
    margin-bottom: 5rem; 
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.create-container h2 {
    text-align: center;
    height: 51px;
    font-family: Fredoka One;
    font-size: 50px;
    color: #333333;
    background-color: red;
}

.create-section {
    width:100%;
}

.create-icon {float:left;
    width:47px;
    height:47px;margin-right:20px
}
 
.create-tile {
    display: inline-block;
    left: 12px;
    top: 80px;
    text-align: left; line-height:47px;
    width: 280px;
    height: 250px;
    background-color: #ffffff;
}


.create-tile h2 {
    font-family: Source Sans Pro;
    font-weight: bold;
    font-size: 30px; 
    color: #333333;
    letter-spacing: -0.6px;

}

.create-tile p {
    font-family: Source Sans Pro;
    font-size: 20px;
    line-height: 1.6;
    color: #616161;
    width: 280px;
    height: 85px; 
}

.create-button {
    position: relative;
    left: 0px;
    top: 50px;
}

<div class="create-tile">
                <div class="create-style-title">
                
                    <h2>       <img
                        src= "https://image.flaticon.com/icons/svg/929/929422.svg"
                        class= "create-icon"
                        alt="TeachIcon"
                    />  Be A Techer</h2>
                </div>
                <p>I am trying to align an image next to a title but I am not able to to do that. I have added color background just to see the position of each element.</p>
                <div class="create-button">
                <BlueButton textSize="13" link_href="/createaclass" text={TextContents.BeATeacherBtn} />
                </div>
            </div>;

【讨论】：

【解决方案3】：

请试试这个。

将此 CSS 添加到元素。

display: flex;
align-items: center; //vertical align
justfy-content: center; //horizontal align

【讨论】：