页面对齐和 div 元素对齐

Question

所以我正在尝试构建这样的页面：

但它看起来像这样：

我尝试使用多个div 并结合Row 和Col 来做到这一点，但它似乎一团糟。一些更改也没有任何影响。

代码：

import React from 'react';
import TextContents from '../assets/translations/TextContents';
import BlueButton from '../components/materialdesign/BlueButton';
import TeachIcon from '../assets/images/teach-class-icon.svg';
import HostIcon from '../assets/images/host-a-class-icon.svg';

import './CreateClassAndHost.css';
import { Row, Col, Container } from 'react-bootstrap';

class CreateClassAndHost extends React.Component {

    render() {

        const CreateAClass = 
            <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>;

        const CreateAHost = 
            <Col className="create-tile">
                <div className="create-style-title">
                    <img
                        src= { HostIcon }
                        className= "create-icon"
                        alt="HostIcon"
                    />  
                    <h2>{TextContents.HostAClass}</h2>
                </div>
                <p>{TextContents.HostAClassDesc}</p>
                <div className="create-button">
                <BlueButton textSize="13" link_href="/createahost" text={TextContents.HostAClassBtn} />
                </div>
            </Col>;
        return (
            <Container bsPrefix="create-container">
                <h1>{TextContents.CreateClassOrHostTitle}</h1>
                <Row classname="create-section">
                    {CreateAClass}
                    {CreateAHost}
                </Row>
            </Container>

        );
    }

}

export default CreateClassAndHost;

CSS代码：

.create-container {
    margin-top: 8%;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.create-container h1 {
    text-align: center;
    height: 51px;
    margin: auto;
    font-family: Fredoka One;
    font-size: 50px;
    color: #333333;
    width:100%;
}

.create-section {
    width:100%;
}

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

.create-style-title {

}

.create-tile {
    display: inline-block;
    left: 12px;
    top: 80px;
    text-align: center;
    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;
}

知道如何使它看起来像上面提供的页面吗？

此外，任何人都可以提供有关如何正确构建布局的良好资源。我还想看看自己在一些资源上很容易展示如何对齐，..构建...

谢谢

Answer 1

首先，我会先简化结构。然后我将使用:before 选择器插入存在图标并将父元素的text-align 属性值设置为center，为子元素设置fixed width。

#parent {
  text-align: center;
}

.card {
  width: 200px;
  display: inline-block;
  margin: 25px;
}

a {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 17px;
  background: blue;
  margin-top: 25px;
  color: white;
  padding: 0 20px;
  border-radius: 36px;
  box-sizing: border-box;
}

h2 {
  position: relative; /* To help control overlap */
}

h2:before {
  content: "accessible_forward"; /* You can also use images as the content */
  font-family: Material Icons;
  position: relative;
  flort: left;
  margin-right: 10px;
}

.card:nth-of-type(2) h2:before {
  content: "anchor";
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div id="parent">

  <div class="card">
    <h2>Titlt1</h2>
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    </p>

    <a hred="#">Click me</a>
  </div>

  <div class="card">
    <h2>Titlt2</h2>
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    </p>
    <a hred="#">Click me</a>
  </div>

</div>