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;
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:
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>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 4 years ago.
I am having an issue with flexbox text wrapping. The <div> with display: flex; does wrap the text correctly but it's width remains on maximum instead of changing to fit the wrapped text's size.
So, here is the HTML Markup:
<div class="tagsFormSection">
<div class="tagsHolder">
<div class="labelItem">
<div class="labelContent">EMPRESA DE TESTE 3</div>
<div class="labelAditional">manager</div>
<div class="labelClose">x</div>
</div>
<div class="labelItem">
<div class="labelContent">COOBO SOLUÇÕES EM PROCUREMENT LTDA</div>
<div class="labelAditional">admin</div>
<div class="labelClose">x</div>
</div>
</div>
</div>
And the SCSS:
.tagsHolder {
display: flex;
flex-direction: row;
margin-bottom: 10px;
flex-wrap: wrap;
.labelItem {
display: flex;
margin-right: 10px;
align-items: center;
margin-top: 2px;
.labelContent,
.labelAditional {
font-weight: 600;
padding: 5px 8px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.labelContent {
color: #fff; //background-color: #666;
background-color: $gray-300;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
font-size: 0.7rem;
}
.labelAditional {
color: #444;
background-color: lighten(map-get($theme-colors, "success"), 10%);
font-size: 0.6rem;
}
.labelClose {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
color: #fff; //background-color: #444;
background-color: $gray-400;
padding: 2px 6px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
font-weight: 700;
font-size: 0.7rem;
height: 100%;
position: relative;
box-sizing: border-box;
transition: all 0.25s ease-in-out;
&:hover {
//background-color: #555;
background-color: $gray-500;
}
}
}
}
Here is a screenshot of what is outputted:
Thanks in advance!
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