This question already has answers here:
Break long word with CSS
(6 answers)
Closed 15 days ago.
I tried height auto, flex-wrap: wrap, but it's not working.
If the content of div is text it's changing its height depend on content, but if content is only numbers it's not working, it's written in one line, "cutting" the given length.
Here is the code
<div id="canvas">155555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>
#canvas{
width: 500px;
/* min-height: 24px; */
height: auto;
overflow: hidden;
margin: 20px auto 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
background-color: grey;
border: 3px solid rgb(90, 90, 90);
color: white;
}
You can use word-break: break-word; property to break number string.
#canvas{
width: 500px;
/* min-height: 24px; */
height: auto;
overflow: hidden;
margin: 20px auto 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
background-color: grey;
border: 3px solid rgb(90, 90, 90);
color: white;
word-break: break-word;
}
<div id="canvas">155555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>
Related
I have a header div that looks like this in css:
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
width: 100%
height: 40px;
}
and a border div under it:
.horizontal-line {
border-bottom: 1px solid red;
margin: auto;
}
My problem is that I can't use padding on the border to make it align with the header or change the margin to fixed numbers, because then it doesn't center.
How would i go about fixing this so that the border adjust to the same width as the header?
Can it be done in CSS only? The reason I ask is that the JS is a template (not ideal I know) and there are other versions on the site using the same template (none of them are using the border div).
I've tried using max-width and that works really good on the large version of the site. Problem with that is that when the page is shrunk it doesn't dynamically adjust the max-width :(
Appreciate any help that I could get :)
Maybe if you can add a container you can do something like this:
You can also add horizontal-line div inside the container and make it full 100% width and get the same result.
.container {
width: 60%;
height: 300px;
background-color: white;
border-bottom: 2px solid black;
}
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
width: 100%;
height: 200px;
background-color: yellow;
}
<div class="container">
<div class="page-header"></div>
</div>
or put % on max-width and then when you resize screen it will resize this is not pretty i would rather choose to use container around it.
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
/* width: 100%; */
max-width: 50%;
height: 200px;
background-color: yellow;
}
.horizontal-line {
max-width: 50%;
margin-top: 50px;
border-bottom: 2px black solid;
}
<div class="page-header"></div>
<div class="horizontal-line"></div>
This question already has answers here:
Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
(10 answers)
image is not resizing in a flexbox layout
(1 answer)
How to force an image to shrink to fit in flexbox?
(3 answers)
Fit image into auto-sized flex child
(2 answers)
Resize image height to match flex parent height
(2 answers)
Closed 4 months ago.
The image for my GBA website is overlapping the box and I don't know how to fix it. I want the image to fit perfectly in the middle of the box, but I can't figure it out. I think it might have something to do with the margin or something else in the CSS.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 2rem;
/*newly added*/
margin: 2rem 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
<div class="shell">
<a href="#" class="card">
<div class="card-header">Pokemon Emerald</div>
<div class="card-main">
<img src="https://via.placeholder.com/100" alt="retrobowlicon" width="80" height="80">
<div class="main-description"></div>
</div>
</a>
</div>
I would like to center something in my code with flexbox. It works for all other elements, only here something seems to be wrong.
Does anyone have an idea?
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
This is how it gets displayed in my live server
You can add body tag on css to make center on the page
to make horizontal center
body {
display: flex,
justify-content: center
}
or make vertical center
body {
display: flex,
align-items: center,
height: 100vh /* This is for full height of your screen */
}
or make horizontal and vertical center
body {
display: flex,
justify-content: center,
align-items: center,
height: 100vh
}
Your "Answer" is centered in the box. Are you trying to center the box on the page? In that case, you would need to apply flex styles to the parent. In this case, the body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px; /*add to remove body margin which always present and makes v-scroll if not removed*/
}
.answer {
display: flex;
justify-content: center;
margin-bottom: 20px; /*Remove it if their is no other content on page*/
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to vertically align an image inside a div
(37 answers)
Closed 3 years ago.
I have already centered the div in the page using Flex and now I want to center the image in the div.
I feel like I am using to many properties in my original centering and do not know if I am doing it correctly.
https://jsfiddle.net/fLkz49nj/
#auth_top{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#auth{
width: 250px;
height: 185px;
background: rgba(255,255,200,0.5);
box-shadow: 0px 1px 3px rgba(25, 25, 25, 0.4);
}
#auth_google_link{
width: 64px;
height: 64px;
display: block;
}
#auth_google_img{
width: 64px;
border: 1px solid white;
border-radius: 2px;
}
#auth_google_img:hover{
border: 1px solid black;
}
You can put #auth inside the flexbox and center it.
#auth_top{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#auth{
width: 250px;
height: 185px;
background: rgba(255,255,200,0.5);
box-shadow: 0px 1px 3px rgba(25, 25, 25, 0.4);
display: flex; /* added style from here */
justify-content: center;
align-items: center;
}
#auth_google_link{
width: 64px;
height: 64px;
display: block;
}
#auth_google_img{
width: 64px;
border: 1px solid white;
border-radius: 2px;
}
#auth_google_img:hover{
border: 1px solid black;
}
<div id='auth_top'>
<div id='auth'>
<a id='auth_google_link' href="/auth/google">
<img id='auth_google_img' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxkZWZzPjxwYXRo%0D%0AIGlkPSJhIiBkPSJNNDQuNSAyMEgyNHY4LjVoMTEuOEMzNC43IDMzLjkgMzAuMSAzNyAyNCAzN2Mt%0D%0ANy4yIDAtMTMtNS44LTEzLTEzczUuOC0xMyAxMy0xM2MzLjEgMCA1LjkgMS4xIDguMSAyLjlsNi40%0D%0ALTYuNEMzNC42IDQuMSAyOS42IDIgMjQgMiAxMS44IDIgMiAxMS44IDIgMjRzOS44IDIyIDIyIDIy%0D%0AYzExIDAgMjEtOCAyMS0yMiAwLTEuMy0uMi0yLjctLjUtNHoiLz48L2RlZnM+PGNsaXBQYXRoIGlk%0D%0APSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+%0D%0APHBhdGggY2xpcC1wYXRoPSJ1cmwoI2IpIiBmaWxsPSIjRkJCQzA1IiBkPSJNMCAzN1YxMWwxNyAx%0D%0AM3oiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiNFQTQzMzUiIGQ9Ik0wIDExbDE3%0D%0AIDEzIDctNi4xTDQ4IDE0VjBIMHoiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiMz%0D%0ANEE4NTMiIGQ9Ik0wIDM3bDMwLTIzIDcuOSAxTDQ4IDB2NDhIMHoiLz48cGF0aCBjbGlwLXBhdGg9%0D%0AInVybCgjYikiIGZpbGw9IiM0Mjg1RjQiIGQ9Ik00OCA0OEwxNyAyNGwtNC0zIDM1LTEweiIvPjwv%0D%0Ac3ZnPg=='/>
</a>
</div>
</div>
Hope it helps. Cheers!
you can do with positioning absolute but i guess that's not what you seek.
what you can do is
#auth{
text-align: center;
white-space: nowrap;
}
#auth:after {
content: '';
min-height: 100%;
display: inline-block;
vertical-align: middle;
}
#auth_google_link{
white-space: normal;
display: inline-block;
vertical-align: middle;
}
you should remove the display:block (to allow it to be centered) from the auth_google_link and then add a padding-top to the auth_google_img about the 22% (to move it down to the middle) and it should work perfectly
How would I make sure that each card is equal height, while keeping the text centered vertically?
I've included a JSFiddle link to illustrate the issue.
HTML
<div class="homepage__recent-story">
<div class="recent-story__card">
<p style="text-align: center">Title</p>
<p style="text-align: center">Caption</p>
</div>
<div class="recent-story__card">
<p style="text-align: center">Test alsdj lak djlaksj dlaksd jlaksd js alsjdlkajsd lakjsd lasjd alksdj aljd alksjd alkdjs alkjsd alsjd lajd lakjd lasjdalsjd alkdj alkjd alsdj alksdj.</p>
<p style="text-align: center">Test alsdj lak djlaksj dlaksd jlaksd js alsjdlkajsd lakjsd lasjd alksdj aljd alksjd alkdjs alkjsd alsjd lajd lakjd lasjdalsjd alkdj alkjd alsdj alksdj.</p>
</div>
<div class="recent-story__card">
<p style="text-align: center">Test</p>
</div>
<div class="recent-story__card">
<p style="text-align: center">Test</p>
</div>
</div>
CSS
.homepage__recent-story{
background-color: red;
margin: 0 0 0 0;
padding: 42px;
border-top: 1px solid grey;
overflow-y: auto;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.recent-story__card{
display: flex;
flex-direction: column;
flex: 1;
background-color: white;
border-radius: 4px;
padding: 24px;
box-sizing: border-box;
max-width: 300px;
min-width: 300px;
color: black;
box-shadow: 0 0 12px rgba(0,0,0,.03);
}
JSFiddle
http://jsfiddle.net/tsnpavme/4/
You need to remove the following line:
align-items: center;
And add the following :
justify-content:center;
Your classes should be the following :
.homepage__recent-story{
background-color: red;
margin: 0 0 0 0;
padding: 42px;
border-top: 1px solid grey;
overflow-y: auto;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
/* align-items: center; <--- removed */
}
.recent-story__card{
display: flex;
flex-direction: column;
flex: 1;
background-color: white;
border-radius: 4px;
padding: 24px;
box-sizing: border-box;
max-width: 300px;
min-width: 300px;
color: black;
box-shadow: 0 0 12px rgba(0,0,0,.03);
justify-content:center; /* Added */
}
A more technical explanation as provided by the following :
Align Items Usage
This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
Justify Content Usage
This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
JSFIDDLE