html - 如何使文本填充div而不溢出？

Question

我正在尝试在网格中填充文本，以便在各种设备上都可以阅读。我还希望文本居中对齐（垂直和水平）。

HTML：

<div class="d-none d-lg-block">
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3">
      <h1 class="display-6">Solar Tracker</h1>
      <div class="v-align">
        <p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
        <button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">Plant Grower</h1>
      <div class="v-align">
        <p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
        <button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3">
      <h1 class="display-6">Home Automation</h1>
      <div class="v-align">
        <p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
        <button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">PCB Design</h1>
      <div class="v-align">
        <p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
        <button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">Studio Griot</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3">
      <h1 class="display-6">Web Development</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3 alternate_2">
      <h1 class="display-6">Data Visualisation</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
    <div class="col-lg-3">
      <h1 class="display-6">Stem CS Labs</h1>
      <div class="v-align">
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
      </div>
    </div>
  </div>
</div>

CSS：

@media(min-width:1100px){
.row{
  height: 50vh;
}
.col-lg-3{
  text-align: center;
  position: relative;
}
.v-align{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
 }
}
@media(min-width:750px){
.row{
  height: 50vh;
}
}
.alternate_2{
  background-color: rgb(250,244,246);
}
.display-6{
  padding-top: 20px;
}
.text{
  text-align: center;
}

桌面输出：

笔记本电脑输出：

iPad输出：

正如您在所有输出中看到的那样，网格中的文本要么太小而无法阅读（台式机），要么从网格溢出（笔记本电脑），要么改变了网格大小（iPad）。我试图做的是让文本在所有设备上保持可读和居中，同时保持页面的网格形状。我怎样才能做到这一点？

谢谢

标签： htmlcss

Answer 1

我建议不要在 CSS 中使事情过于复杂，有更好的方法，也更可靠，可以做到这一点。以 CSS Flex 为例。

.alternate_2 {
	background-color: rgb(250,244,246);
}

.row {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

.col-lg-3 {
	width: 100%;
	padding: 2vw;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.v-align, .text {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.text {
	justify-content: center;
}

@media(min-width: 500px) {
	.col-lg-3 {
		width: 50%;
	}
}
@media(min-width: 1200px) {
	.col-lg-3 {
		width: 25%;
	}
}

<div class="d-none d-lg-block">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3">
                <h1 class="display-6">Solar Tracker</h1>
                <div class="v-align">
                    <p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
                    <button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
            <div class="col-lg-3 alternate_2">
                <h1 class="display-6">Plant Grower</h1>
                <div class="v-align">
                    <p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
                    <button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
            <div class="col-lg-3">
                <h1 class="display-6">Home Automation</h1>
                <div class="v-align">
                    <p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
                    <button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
            <div class="col-lg-3 alternate_2">
                <h1 class="display-6">PCB Design</h1>
                <div class="v-align">
                    <p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
                    <button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 alternate_2">
                <h1 class="display-6">Studio Griot</h1>
                <div class="v-align">
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
                    <button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
            <div class="col-lg-3">
                <h1 class="display-6">Web Development</h1>
                <div class="v-align">
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
                    <button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
            <div class="col-lg-3 alternate_2">
                <h1 class="display-6">Data Visualisation</h1>
                <div class="v-align">
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
                    <button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
            <div class="col-lg-3">
                <h1 class="display-6">Stem CS Labs</h1>
                <div class="v-align">
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
                    <button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
                </div>
            </div>
        </div>
    </div>
</div>