This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 3 years ago.
I would like to place element right after some title, which can be multiline. I want to place it without white blank space when there some text wrap occur.
This one-line title is easy:
But following multiline title has a lot of blank space after
What I got so far is following code:
div {
display: inline-flex;
justify-content: space-around;
align-items: center;
max-width: 220px;
}
.text {
font-weight: bold;
font-family: "Inter UI", sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #777777;
line-height: 120%;
display: inline-block;
flex-grow: 0;
flex-shrink: 1;
}
.new {
width: 30px;
height: 16px;
box-sizing: border-box;
border: 1px solid #fe7f66;
border-radius: 4px;
text-transform: uppercase;
font-size: 8px;
line-height: 10px;
letter-spacing: 0.1em;
color: #fe7f66;
display: inline-block;
text-align: center;
padding: 2px 0;
flex-shrink: 0;
flex-grow: 0;
}
<div>
<span class="text">STRING/ COUNTRY BASED ENGAGEMENT</span>
<span class="new">new</span>
</div>
Related
I'm building a React Calculator app, and for the display, I have a textarea to show the input and output. Currently, the first line of text starts from the very top. Instead, I need it to align to the bottom and then scroll up as more lines are added. Is this possible with css?
Parent Div CSS:
.display {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60px;
padding: 40px 0;
background: #ff0509;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
Textarea CSS:
textarea {
width: 316px;
height: 110px;
color: white;
background: none;
text-align: left;
font-weight: 200;
font-size: 40px;
line-height: 30px;
padding: 5px;
resize: none;
border: none;
}
HTML:
<div className="display">
<textarea value={this.props.dispValue} />
</div>
I have this button I am trying to make, but I am unable to get the text to be centered. I have previously looked at what past people have answered on how to align text within a button, but the ones I have tried do not seem to work.
.btn1 {
width: 160px;
height: 40px;
align-items: center;
text-align: center;
display: inline;
border-radius: 60px;
background-color: white;
border-color: #05434a;
border-width: 3px;
box-shadow: 5px 6px #05434a;
text-transform: uppercase;
font-size: 1.7vh;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
font-family: poppins;
padding: 0px;
}
.nd {
text-decoration: none;
}
.social-link {
text-align: center;
margin-top: 20px;
margin-bottom: 0 !important;
}
<div class="social-link">
<a class = "nd" href = "">
<button class="btn1">
<p>text</p>
</button></a>
</div>
While one thing that seems OK is centering of the text, your HTML has these problems:
Error: The element button must not appear as a descendant of the a
element.
Error: Element p not allowed as child of element button in this
context
So this snippet removes these two elements and moves the CSS button styling onto the anchor element. It makes this inline-flex to help center the text.
Note: the text is centered though it can sort of appear as if it's a bit high because of the visual strength of the shadow. This snippet puts a 1px width border on the element just so you can assure yourself the text is centered.
.btn1 {
width: 160px;
height: 40px;
align-items: center;
justify-content: center;
text-align: center;
display: inline-flex;
border-radius: 60px;
background-color: white;
border-color: #05434a;
border-width: 1px;
border-style: solid;
box-shadow: 5px 6px #05434a;
text-transform: uppercase;
font-size: 1.7vh;
margin-left: auto;
margin-right: auto;
font-family: poppins;
padding: 0px;
}
.nd {
text-decoration: none;
}
.social-link {
text-align: center;
margin-top: 20px;
margin-bottom: 0 !important;
}
<div class="social-link">
<a class="nd btn1" href="">
text
</a>
</div>
Well, pretty easy and always works:
display: flex;
justify-contect: center;
align-item: center;
that will get the job done
for the element, set:
text-align: center;
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
picture of the questionmark next to the text
(can't post pictures yet)
the questionmark is a bit lower than the "Status Update" text and I want to align it, but i don't know how.
The css and html is here:
.qmarkCircle {
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
&:hover,
&:after{
content: "?" !important;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
hope this is enough
flex or grid might help :
here is a flex example:
.qmarkCircle {
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
}
.qmarkCircle:hover:after {
content: "?" !important;
}
header {
display: flex;
height: 100vh;
background: gray;
align-items: center;
justify-content: center;
}
body {
margin: 0;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
h3 and div are not inline elements by default. So, first you need to make them inline, then any stylings will work on it.
h3 {
display: inline;
}
.qmarkCircle {
display: inline;
vertical-align: middle;
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
&:hover,
&:after{
content: "?" !important;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
SOLUTION WITHOUT USING FLEX:
Use this code for all the elements you want to align parallell:
display: inline-block;
vertical-align: middle;
I am using LESS (CSS) trying to align a span (button text) inside a div (button). The span is centrally aligned horizontally but is top aligned vertically. I would also like the span object to adjust itself to the text size automatically.
Here's the LESS code:
.button(#color:#crimson-red) {
border-radius: #small-border-radius;
border-style: none;
background-color: #color;
text-align: center;
display: inline-block;
}
.button-font {
vertical-align: middle;
overflow: auto;
font-family: "Helvetica Neue", sans-serif;
color: #off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(#blue);
}
You can achieve this by using the flexbox layout.
So by adding the following properties and values to the .button selector you can center the span.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
Here is the full less file for reference.
#off-white: #fefefe;
#blue: #4286f4;
#small-border-radius: 5px;
.button(#color:#crimson-red) {
border-radius: #small-border-radius;
border-style: none;
background-color: #color;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-font {
font-family: "Helvetica Neue", sans-serif;
color: #off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(#blue);
width: 300px;
height: 100px;
}
This would be the html:
<button class="blue-button">
<span class="button-font">Hello, lots of text here</span>
</button>
Here is a link to a JSFiddle with compiled css.
I have a series of buttons that I need to have text and a chevron with a different class.
The text and the chevron both need to be centered vertically and horizontally within the container and be able to expand and contract based on the number of the characters.
Additionally I need the chevron to always be flush against the text with a 10px left padding.
I'm having difficulty centering the text and arrow.
Thanks for your help!
section {
margin:2px;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
}
.cta-text{
float:left;
text-align: center;
}
.arrow-lm{
float: left;
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
top: -11px;
}
Here's the fiddle
http://jsfiddle.net/ebjrc/1/
Not sure if this is what you mean, but I would use the flexible box model.
section {
margin:2px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
}
.cta, .cta-text{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.arrow-lm{
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
}
Let me know if this is what you need.
-- EDIT
jsFiddle here
Cheers!
I think your approach is much more complicaded as needed, if i understanded you correctly.
Remember that every anchor element can also have a layout. Why would you place a anchor and give a div inside it propties of layout when the anchor itself could have those propeties. This way you can use less elements in your code.
<div class="campaign-1">
<a href="#" class="submit">
Tune In
<span> > </span>
</a>
</div>
You can give you span a additional class if you need to edit it somewhere in your code, which i'm not aware of.
Now also this reduces your css code:
div {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
margin: .5em;
}
div a
{
color: white;
}
That's actually all you need.
jsFiddle