将标题居中对齐页面

huangapple
go评论104阅读模式
英文:

Align titles in center of page

问题

在我的Angular项目中，我想先写title1，然后是第二个title2，旁边有2张图片，如下图所示：

将标题居中对齐页面

HTML：

  1. <div class ="container">
  2.     <div class="col-md-6 ">
  3.         <p class="Title1">title1<p>
  4.             <div class="imageContainer">
  5.                 <p class="Title2">title2</p>
  6.                 <img class="image2" src="assets/c.png" alt="Your Image">
  7.                 <img class="image" src="assets/Loader.gif" alt="Your Image">
  8.             </div>  
  9.     </div>
  10. </div>
  12. <div class ="container">
  13.     <div class="col-md-6 ">
  14.         <p class="Title1">title1<p>
  15.             <div class="imageContainer">
  16.                 <p class="Title2">title2</p>
  17.                 <img class="image2" src="assets/c.png" alt="Your Image">
  18.                 <img class="image" src="assets/Loader.gif" alt="Your Image">
  19.             </div>  
  20.     </div>
  21. </div>

CSS：

  1. .container {
  2.     display: flex;
  3.     font-size: 60px; 
  4.     flex-direction: column;
  5.     align-items: center;
  6.     justify-content: center;
  7.     height: 100vh;
  8.   }
  10. .Title1{
  11.     font-family: Lufga;
  12.     color: black;
  13.     font-size: 5 em;
  14.     margin-bottom: 0;
  15.    text-align: center;
  17. }
  19. .image{
  20.   max-width: 25%;
  21.   display: block; 
  22.   margin-left: 10px; 
  23.   margin-top: 0%;
  24.   // margin-bottom: 10%; 
  25.   // margin-left: 5%;
  26.   
  27. }
  28. .image2{
  29.     max-width: 2.5%;
  30.     display: block; 
  31.     //margin-left: 10px; 
  32.     margin-bottom: 23%; 
  33.        
  34.   }
  36. .imageContainer {
  37.    // margin-bottom: 70%;
  38.     margin-top: 0%;
  39.     display: flex;
  40.     align-items: center;
  41.     justify-content: center;
  42.     margin-left: 24%;
  43.   }
  44.   
  45.   .Title2 {
  46.     font-family: Lufga;
  47.     color: black;
  48.     font-size: 23 em;
  49.     text-align: center;
  50.   }

问题是两个标题的字体大小相同，但通常情况下title2应该更大，此外，第一行和第二行之间有空白，而第二个图像不在中间，所以我使用了边距来使其居中。

英文:

In my Angular project, I want to write first title1 then a second title2 and next to it there is 2 images as the following image:

将标题居中对齐页面

HTML :

  1. <div class ="container">
  2.     <div class="col-md-6 ">
  3.         <p class="Title1">title1<p>
  4.             <div class="imageContainer">
  5.                 <p class="Title2">title2</p>
  6.                 <img class="image2" src="assets/c.png" alt="Your Image">
  7.                 <img class="image" src="assets/Loader.gif" alt="Your Image">
  8.             </div>  
  9.     </div>
  10. </div>
  12. <div class ="container">
  13.     <div class="col-md-6 ">
  14.         <p class="Title1">title1<p>
  15.             <div class="imageContainer">
  16.                 <p class="Title2">title2</p>
  17.                 <img class="image2" src="assets/c.png" alt="Your Image">
  18.                 <img class="image" src="assets/Loader.gif" alt="Your Image">
  19.             </div>  
  20.     </div>
  21. </div>

CSS :

  1. .container {
  2.     display: flex;
  3.     font-size: 60px; 
  4.     flex-direction: column;
  5.     align-items: center;
  6.     justify-content: center;
  7.     height: 100vh;
  8.   }
  10. .Title1{
  11.     font-family: Lufga;
  12.     color: black;
  13.     font-size: 5 em;
  14.     margin-bottom: 0;
  15.    text-align: center;
  17. }
  19. .image{
  20.   max-width: 25%;
  21.   display: block; 
  22.   margin-left: 10px; 
  23.   margin-top: 0%;
  24.   // margin-bottom: 10%; 
  25.   // margin-left: 5%;
  26.   
  27. }
  28. .image2{
  29.     max-width: 2.5%;
  30.     display: block; 
  31.     //margin-left: 10px; 
  32.     margin-bottom: 23%; 
  33.        
  34.   }
  36. .imageContainer {
  37.    // margin-bottom: 70%;
  38.     margin-top: 0%;
  39.     display: flex;
  40.     align-items: center;
  41.     justify-content: center;
  42.     margin-left: 24%;
  43.   }
  44.   
  45.   .Title2 {
  46.     font-family: Lufga;
  47.     color: black;
  48.     font-size: 23 em;
  49.     text-align: center;
  50.   }

The problem is font size of two titles are the same but normally title2 should be bigger and also I have a space between the first row and the second one besides the second image is not on center so I used the margin to make it in center.

答案1

得分: 1

以下是修正后的内容：

  1. 你已经给 .container 添加了 display: flex 和 flex-direction: column，但它只有一个子元素 .col-md-6，要么移除 .col-md-6，要么将 display: flex 添加到它。

  2. 对于 font-size，你已经给出了 5 em，移除这里的空格，应该像这样使用 5em。

  3. 正确关闭 <p> 标签的方式是 </p>。

  4. 为了保持内容在同一行显示，在 display: flex 中移除 flex-direction: column;，默认的 flex-direction 是 row，所以你不需要添加这个。

这是示例代码：

  1. .container {
  2.   display: flex;
  3.   font-size: 60px;
  4.   align-items: center;
  5.   justify-content: center;
  6.   height: 100vh;
  7. }
  9. .Title1 {
  10.   font-family: Lufga;
  11.   color: black;
  12.   font-size: 5em;
  13.   margin-bottom: 0;
  14.   text-align: center;
  15. }
  17. .image {
  18.   max-width: 25%;
  19.   display: block;
  20.   margin-left: 10px;
  21.   margin-top: 0%;
  22. }
  24. .image2 {
  25.   max-width: 2.5%;
  26.   display: block;
  27.   margin-bottom: 23%;
  28. }
  30. .imageContainer {
  31.   margin-top: 0%;
  32.   display: flex;
  33.   align-items: center;
  34.   justify-content: center;
  35.   margin-left: 24%;
  36. }
  38. .Title2 {
  39.   font-family: Lufga;
  40.   color: black;
  41.   font-size: 3em;
  42.   text-align: center;
  43. }
  1. <div class="container">
  2.   <p class="Title1">title1</p>
  3.   <div class="imageContainer">
  4.     <p class="Title2">title2</p>
  5.     <img class="image2" src="assets/c.png" alt="Your Image">
  6.     <img class="image" src="assets/Loader.gif" alt="Your Image">
  7.   </div>
  8. </div>
  10. <div class="container">
  11.   <p class="Title1">title1</p>
  12.   <div class="imageContainer">
  13.     <p class="Title2">title2</p>
  14.     <img class="image2" src="assets/c.png" alt="Your Image">
  15.     <img class="image" src="assets/Loader.gif" alt="Your Image">
  16.   </div>
  17. </div>

根据需要修改 font-size 和间距。

英文:

You have some mistakes here:

  1. You have given display flex with flex-direction: column to .container, but it has only one child .col-md-6, here either remove .col-md-6 or give display flex to this.

  2. For font-size, you have given 5 em, remove space here, use like 5em

  3. close you &lt;p&gt; tag correctly with &lt;/p&gt;

  4. To keep content on same row, in display flex remove flex-direction: column;, default flex-direction is row, so you don't need to add this.

Here is the example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .container {
  2.   display: flex;
  3.   font-size: 60px;
  4. /*   flex-direction: column;
  5.    */  align-items: center;
  6.   justify-content: center;
  7.   height: 100vh;
  8. }
  10. .Title1 {
  11.   font-family: Lufga;
  12.   color: black;
  13.   font-size: 5em;
  14.   margin-bottom: 0;
  15.   text-align: center;
  17. }
  19. .image {
  20.   max-width: 25%;
  21.   display: block;
  22.   margin-left: 10px;
  23.   margin-top: 0%;
  24. /*   // margin-bottom: 10%; 
  25.   // margin-left: 5%;
  26.    */
  27. }
  29. .image2 {
  30.   max-width: 2.5%;
  31.   display: block;
  32.  /*  //margin-left: 10px;  */
  33.   margin-bottom: 23%;
  35. }
  37. .imageContainer {
  38. /*   // margin-bottom: 70%;
  39.    */  margin-top: 0%;
  40.   display: flex;
  41.   align-items: center;
  42.   justify-content: center;
  43.   margin-left: 24%;
  44. }
  46. .Title2 {
  47.   font-family: Lufga;
  48.   color: black;
  49.   font-size: 3em;
  50.   text-align: center;
  51. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;p class=&quot;Title1&quot;&gt;title1&lt;/p&gt;
  3.   &lt;div class=&quot;imageContainer&quot;&gt;
  4.     &lt;p class=&quot;Title2&quot;&gt;title2&lt;/p&gt;
  5.     &lt;img class=&quot;image2&quot; src=&quot;assets/c.png&quot; alt=&quot;Your Image&quot;&gt;
  6.     &lt;img class=&quot;image&quot; src=&quot;assets/Loader.gif&quot; alt=&quot;Your Image&quot;&gt;
  7.   &lt;/div&gt;
  9. &lt;/div&gt;
  11. &lt;div class=&quot;container&quot;&gt;
  12.   &lt;p class=&quot;Title1&quot;&gt;title1&lt;/p&gt;
  13.   &lt;div class=&quot;imageContainer&quot;&gt;
  14.     &lt;p class=&quot;Title2&quot;&gt;title2&lt;/p&gt;
  15.     &lt;img class=&quot;image2&quot; src=&quot;assets/c.png&quot; alt=&quot;Your Image&quot;&gt;
  16.     &lt;img class=&quot;image&quot; src=&quot;assets/Loader.gif&quot; alt=&quot;Your Image&quot;&gt;
  17.   &lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

change font-size and spacings as per your need.

huangapple
  • 本文由 发表于 2023年5月17日 17:43:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76270694.html
  • angular
  • sass
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定