居中CSS网格内容并创建背景图片。

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

Center CSS grid content and create background image

问题

I have been stuck on this for quite some time and I am new to css in general. My goal here to make a 3 column layout where the first and last columns are empty, and they will serve as the margin (not sure if that is the correct word since I know there is a margin property) for the page. In the center column I am trying to put a flexbox for each row to center a title, quote, and slogan. Artist credits will be displayed in the bottom right of the middle column. However, I have noticed that the content is never centered on my monitor and I have not idea why. Additionally, I cannot seem to figure out how to make a background image span the whole container or center column. I was hoping the content (title, slogan, quote, artist credits) could be on top of the background image and that the background image could have a max width similar to the center column. Here is some code (I commented out the background image stuff for now to see spacing):

  1. <section class="welcome">
  2. <div class="welcome-container">
  3. <div id="welcome-title">Some Title</div>
  4. <div class="welcome-slogan">Slogan</div>
  5. <div class="welcome-quote fst-italic">"A quote" -Person</div>
  6. <div class="artist-credit">Image by <a href="https://google.com">Artist</a></div>
  7. <!-- <div class="welcome-cover"><img src="/images/welcome_image_bw.png"/></div> -->
  8. </div>
  9. </section>
  1. .welcome {
  2. z-index: 2;
  3. }
  4. .welcome-container {
  5. display: grid; // make the homepage container a css grid (exclude header/footer)
  6. grid-template-columns: auto fit-content(1200px) auto; // 12 cols (max) and can style as desired
  7. grid-template-rows: 400px, auto, 100px, 100px; // title, slogan, quote, creds
  8. justify-content: center; // content is left to right
  9. z-index: 1;
  10. // background:
  11. // url("https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg") green
  12. // scroll // fixed to keep img despite scroll
  13. // no-repeat;
  14. // background-size: 20% auto;
  15. }
  16. #welcome-title {
  17. grid-column: 2 / span 1;
  18. display: flex;
  19. justify-content: center;
  20. font-size: 60px;
  21. font-family: 'Roboto Mono';
  22. font-weight: 400;
  23. color: var(--color-dark);
  24. }
  25. .welcome-slogan {
  26. grid-column: 2 / span 1;
  27. display: flex;
  28. justify-content: center;
  29. font-size: 28px;
  30. font-family: 'Roboto Mono';
  31. font-weight: 300;
  32. color: var(--color-med);
  33. }
  34. .welcome-quote {
  35. grid-column: 2 / span 1;
  36. display: flex;
  37. justify-content: center;
  38. font-size: 18px;
  39. font-family: 'Roboto Mono';
  40. font-weight: 300;
  41. color: var(--color-dark);
  42. }
  43. .welcome-cover {
  44. grid-column: 1 / -1;
  45. position: relative;
  46. width: 100%; // make sure doesnt exceed page horizontally
  47. height: 100%;
  48. object-fit: cover;
  49. z-index: 0; // image in background
  50. background-color: var(--color-dark); // in case img doesnt load
  51. }

Here are some screenshots to show how the page is not aligned:

居中CSS网格内容并创建背景图片。

居中CSS网格内容并创建背景图片。

居中CSS网格内容并创建背景图片。

To summarize, I am trying to accomplish the following:

  1. How to center the center column of the grid? How can I set the max width of this center column (I tried fit-content()). Why are there extra grid cells appearing in the inspect element panel?
  2. How to set a background image inside of welcome-container? I tried in both css and html and I ideally want it to be responsive. I was thinking of later making a media query to stop the image from stretching if the container becomes wider than the image. Is this a good approach? Or should I instead make the image fill the center column and it can be limited by the max width there?
英文:

I have been stuck on this for quite some time and I am new to css in general. My goal here to to make a 3 column layout where the first and last columns are empty, and they will serve as the margin (not sure if that is the correct word since I know there is a margin property) for the page. In the center column I am trying to put a flexbox for each row to center a title, quote, and slogan. Artist credits will be displayed in the bottom right of the middle column. However, I have noticed that the content is never centered on my monitor and I have not idea why. Additionally, I cannot seem to figure out how to make a background image span the whole container or center column. I was hoping the content (title, slogan, quote, artist credits) could be on top of the background image and that the background image could have a max width similar to the center column. Here is some code (I commented out the background image stuff for now to see spacing):

html

  1. &lt;section class=&quot;welcome&quot;&gt;
  2. &lt;div class=&quot;welcome-container&quot;&gt;
  3. &lt;div id=&quot;welcome-title&quot;&gt;Some Title&lt;/div&gt;
  4. &lt;div class=&quot;welcome-slogan&quot;&gt;Slogan&lt;/div&gt;
  5. &lt;div class=&quot;welcome-quote fst-italic&quot;&gt;&quot;A quote&quot; -Person&lt;/div&gt;
  6. &lt;div class=&quot;artist-credit&quot;&gt;Image by &lt;a href=&quot;https://google.com&quot;&gt;Artist&lt;/a&gt;&lt;/div&gt;
  7. &lt;!-- &lt;div class=&quot;welcome-cover&quot;&gt;&lt;img src=&quot;/images/welcome_image_bw.png&quot;/&gt;&lt;/div&gt; --&gt;
  8. &lt;/div&gt;
  9. &lt;/section&gt;

css

  1. .welcome {
  2. z-index: 2;
  3. }
  4. .welcome-container {
  5. display: grid; // make the homepage container a css grid (exclude header/footer)
  6. grid-template-columns: auto fit-content(1200px) auto; // 12 cols (max) and can style as desired
  7. grid-template-rows: 400px, auto, 100px, 100px; // title, slogan, quote, creds
  8. justify-content: center; // content is left to right
  9. z-index: 1;
  10. // background:
  11. // url(&quot;https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg&quot;) green
  12. // scroll // fixed to keep img despite scroll
  13. // no-repeat;
  14. // background-size: 20% auto;
  15. }
  16. #welcome-title {
  17. grid-column: 2 / span 1;
  18. display: flex;
  19. justify-content: center;
  20. font-size: 60px;
  21. font-family: &#39;Roboto Mono&#39;;
  22. font-weight: 400;
  23. color: var(--color-dark);
  24. }
  25. .welcome-slogan {
  26. grid-column: 2 / span 1;
  27. display: flex;
  28. justify-content: center;
  29. font-size: 28px;
  30. font-family: &#39;Roboto Mono&#39;;
  31. font-weight: 300;
  32. color: var(--color-med);
  33. }
  34. .welcome-quote {
  35. grid-column: 2 / span 1;
  36. display: flex;
  37. justify-content: center;
  38. font-size: 18px;
  39. font-family: &#39;Roboto Mono&#39;;
  40. font-weight: 300;
  41. color: var(--color-dark);
  42. }
  43. .welcome-cover {
  44. grid-column: 1 / -1;
  45. position: relative;
  46. width: 100%; // make sure doesnt exceed page horizontally
  47. height: 100%;
  48. object-fit: cover;
  49. z-index: 0; // image in background
  50. background-color: var(--color-dark); // in case img doesnt load
  51. }

Here are some screenshots to show how the page is not aligned:
居中CSS网格内容并创建背景图片。

居中CSS网格内容并创建背景图片。

居中CSS网格内容并创建背景图片。

To summarize, I am trying to accomplish the following:

  1. How to center the center column of the grid? How can I set the max width of this center column (I tried fit-content()). Why are there extra grid cells appearing in the inspect element panel?
  2. How to set a background image inside of welcome-container? I tried in both css and html and I ideally want it to be responsive. I was thinking of later making a media query to stop the image from stretching if the container becomes wider than the image. Is this a good approach? Or should I instead make the image fill the center column and it can be limited by the max width there?

答案1

得分: 1

这不是设置列只是留空的最佳方法。您可以将边距/填充作为网格的一部分设置。

由于您要求一个3列网格,您可以检查我附加的代码片段。以供将来参考,“text-align: center;”可以起到作用。在处理网格时,我建议您查看justify-selfalign-self属性(mdn文档)。

我添加了一些填充和边框,以便您更容易看到一切是如何结构化的。您可以去掉它。

  1. .container {
  2. display: grid;
  3. padding: 10px;
  4. grid-template-columns: repeat(3, 1fr);
  5. border: 1px solid red;
  6. column-gap: 20px;
  7. }
  8. .column {
  9. border: 1px solid blue;
  10. text-align: center;
  11. }
  12. .center-column {
  13. background-color: yellow;
  14. }
  1. <div class="container">
  2. <div class="column left-column"></div>
  3. <div class="column center-column">
  4. <h1 class="title">Some title</h1>
  5. <div class="slogan">Slogan</div>
  6. <div class="quote">Some quote</div>
  7. <div class="artist">Image by <a href="#">Artist</a></div>
  8. </div>
  9. <div class="column right-column"></div>
  10. </div>

希望这有所帮助。

英文:

It's not the best idea to set up columns just to leave them empty. You can set margins/padding as part of the grid.

As you asked for a 3 column grid, you may check the code snippet I've attached. For future reference, "text-align: center;" does the trick. When it comes to grids, I advise you to check the justify-self and align-self properties (mdn docs).

I added some padding and borders to make it easier for you to see how everything is structured. You can get rid of that.

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

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

  1. .container {
  2. display: grid;
  3. padding: 10px;
  4. grid-template-columns: repeat(3, 1fr);
  5. border: 1px solid red;
  6. column-gap: 20px;
  7. }
  8. .column {
  9. border: 1px solid blue;
  10. text-align: center;
  11. }
  12. .center-column {
  13. background-color: yellow;
  14. }

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

  1. &lt;div class=&quot;container&quot;&gt;
  2. &lt;div class=&quot;column left-column&quot;&gt;&lt;/div&gt;
  3. &lt;div class=&quot;column center-column&quot;&gt;
  4. &lt;h1 class=&quot;title&quot;&gt;Some title&lt;/h1&gt;
  5. &lt;div class=&quot;slogan&quot;&gt;Slogan&lt;/div&gt;
  6. &lt;div class=&quot;quote&quot;&gt;Some quote&lt;/div&gt;
  7. &lt;div class=&quot;artist&quot;&gt;Image by &lt;a href=&quot;#&quot;&gt;Artist&lt;/a&gt;&lt;/div&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;column right-column&quot;&gt;&lt;/div&gt;
  10. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

我找到了答案关于1。我最终改变成了5列布局,然后用justify-contenttext-align将内容居中。然而,在网格的某个区域设置背景图仍然是一个挑战。

编辑:我找到了关于2的答案,尽管不够优雅。在HTML中,我不得不将图像标签放在<div>之外,然后按照以下链接中的方法使内容在网格中重叠:
https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
和这里:https://www.youtube.com/watch?v=-qOe8lBAChE&ab_channel=TraversyMedia

英文:

I found the answer to 1. I ended up changing to a 5 column layout and then centering the content there with justify-content and text-align. However, setting a background image across an area of the grid is still a challenge.

edit: I found an answer to 2, although not elegant. In the html I had to put an image tag not inside of a div and then follow how to make content overlap in a grid from here:
https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
and here: https://www.youtube.com/watch?v=-qOe8lBAChE&amp;ab_channel=TraversyMedia

huangapple
  • 本文由 发表于 2023年2月27日 01:32:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/75573823.html
匿名

发表评论

匿名网友

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

确定