I wanted to center a heading in the header. Is that also possible with justify-content: center; ?
Strangely, that's ignored.
Code Alles anzeigenheader { background-image: url (images / background.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.85; position: relative; } .header_title { position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; transform: translateX (-50%) translateY (-50%); font-family: 'Covered By Your Grace', cursive; line-height: 1.65em; font-size: 3.125rem; color: #ffffff; text-align: center; }Code Alles anzeigenheader { background-image: url (images / background.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.85; display: flex; } .header_title { justify-content: center; align-items: center; font-family: 'Covered By Your Grace', cursive; line-height: 1.65em; font-size: 3.125rem; color: #ffffff; text-align: center; }In addition, I would like to represent several horizontally aligned boxes.
A maximum of three in a row, so that the rest automatically wraps to the next line. The only problem is that flex: 1; or other width specifications are ignored. Instead, all boxes are placed in a row regardless of flex-wrap: wrap. I found a workaround with a break that works so far. Is that correct or is there another solution? Why are the width specifications ignored?
Code Alles anzeigen<div id = "footer_wrapper"> <main class = "main2"> <div class = "rowbox"> </div> <div class = "rowbox"> </div> <div class = "rowbox"> </div> <div class = "break"> </div> <! - break -> <div class = "rowbox"> </div> <div class = "rowbox"> </div> <div class = "rowbox"> </div> <div class = "break"> </div> <! - break -> <div class = "rowbox"> </div> <div class = "rowbox"> </div> <div class = "rowbox"> </div> </main> </div> #footer_wrapper { min-height: 100vh; } .main { max-width: 950px; margin: 0 auto; flex: 1; display: flex; flex-direction: row; flex-wrap: wrap; } .news_box { margin-top: 50px; padding: 10px; background-color: #ffffff; border: 1px solid # f0f0f0; border-radius: 2px; } .news_box_title { margin: 10px; text-align: center; } .news_box_content { text-align: center; } .button_1 { display: block; margin: 10px; padding: 10px; border: 1px solid # f0f0f0; border-radius: 2px; letter-spacing: 4px; text-align: center; text-decoration: none; } .button_1: hover { background-color: #fafafa; } .rowbox { flex: 1; margin-top: 50px; margin-left: 10px; margin-right: 10px; background-color: #ffffff; border: 1px solid # f0f0f0; padding: 15px; border-radius: 3px; } .break { flex base: 100%; height: 0; }
thanks my issue has been fixed.