我如何改变网格布局中不同段落的长度

Question

我正在尝试更改卡片上段落的长度，以便我可以在某些行上使用某些单词。我尝试使用 text-align 但发现没有适合它的属性。是否有用于此类情况的特殊属性，或者我是否必须使用填充。如果我这样做会不会有点复杂？

body{
background-color:grey;
}



.grid{
    display:inline;
    display:grid;
    background-color:white;
    border-radius:7px;
    position:absolute;
    top:50%;
    padding:5px;
    left:50%;
    transform: translate(-50%, -50%);
    margin:auto;
    grid-template-rows:150px 100px;
    grid-template-columns:150px;
    }


    img{
    height:100%;
    background-color:black;/*Beacause i cannot add image*/
    object-fit:cover;
    width:100%;
    border-radius:7px;
   }


   .bold{
   font-family:sans-serif;
   font-weight:bold;
   font-size:12px;
   }

  .grid-item{
    padding:3px;

  }

<div class="grid">
      <div class="grid-item"><img src="image-qr-code.png"></div>
      <div class="grid-item"><p class="bold">Improve your front-end</p><p class="bold">skills by building projects</p></div>
    </div>

我希望它看起来像这样。

Answer 1

我们可以在 <p> 标签中使用 align=center 属性，而不是使用

text-align

属性。

HTML

<p>

align 属性用于指定段落文本内容的对齐方式。

语法：

<p align="left | right | center | justify">

body {
  background-color: grey;
}

.grid {
  display: inline;
  display: grid;
  background-color: white;
  border-radius: 7px;
  position: absolute;
  top: 50%;
  padding: 5px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  grid-template-rows: 150px 100px;
  grid-template-columns: 150px;
}

img {
  height: 100%;
  background-color: black; /*Beacause i cannot add image*/
  object-fit: cover;
  width: 100%;
  border-radius: 7px;
}

.bold {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 12px;
}

.grid-item {
  padding: 3px;
/*   border: solid red; */
}

<div class="grid">
  <div class="grid-item"><img src="image-qr-code.png"></div>
  <div class="grid-item">
    <p align=center class="bold">Improve your front-end skills by </p>
    <p align=center class="bold">Scan the QR Code to visit front-end mentor and take... </p>
  </div>
</div>