How to center <div> inside a <button>? - javascript

I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?

First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.

can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>

For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}

Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.

Related

What to change in order for this to shrink?

So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;

Possible to remove padding on higher order element from lower order element?

Bit of a weird question and this is very hacky, but I am stumped. I am using an internal tool to create a webpage. As such, I only have access to some of the generated HTML and CSS due to the nature of these tools.
So, forced upon me is the HTML
<div class="example">
<div class="whatICanAccess">
</div>
</div>
And my CSS :
.example {
padding : 1.6em;
}
The only place I can edit my CSS is within the "WhatICanAccess" HTML tag, using style="foo".
Is it possible for me to remove the padding from the outer element ("example") here in any way?
Is it possible for me to remove the padding from the outer element and ONLY have it effect the direct parent of "WhatICanAccess"?
Example is a class that is used throughout the code, and I would only like to remove it in one particular place - but as I say, I cannot add more specific identifiers/tags - I can only edit in this one place.
Can anyone help? Thank you :)
UPDATE :
I now have this HTML :
<div class="example">
<div class="moreSpecific" style=" padding: -1.8em;>
</div>
</div>
but the 1.6em of .example is still overriding. What have I done wrong here ?
Give the 1 place a separate class and give it negative margins to balance the padding.
Alternatively, use position: absolute & use width and height values.
With either you don't have to worry about not having access to the parent element.
Tried to make a JSFiddle, but apparently they've removed the "save" option for the time being ...
<div class="example">
<div class="whatICanAccess">
<div class="noPadding">This div has negative margins and absolute positioning</div>
<div>This div inherits its padding from 'example'</div>
</div>
</div>
.example {
padding : 1.6em;
height: 400px;
width 100%;
background-color: #ccc;
}
.whatICanAccess {
height: 300px;
background-color: #fff;
}
.noPadding {
position: absolute;
margin: -1.6em 0 0 0;
background-color: #eee;
}
If you must use inline CSS...
<div style="margin: -1.6em 0 0 0; position: absolute;">This div has negative margins and absolute positioning</div>
If you know the id of example, you could just use document.getElementById('example').style.padding='0px';
Giving your html a negative margin or padding might work too.

Mismatch in text width between div and textarea

I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.

Centering text over an IMAGE BUTTON, while driving the text hover effect from hovering over the image- not the text

I have a set of buttons in which I need the text to - eventually - change based on country.
This means that I have to use a text element to be part of the button. Since the button has hover effect, I need the text to be contained inside the image div.
By using the "", I get the text to be position correctly, but the problems are:
A: the text responds to the pointer way outside the image boundary (which actually causing the click to activate a different button.
B: if the pointer is placed directly over the text, only the text get highlighted (through the hover effect), but not the button.
I am looking for a solution (either via CSS or JavaScript) that will make the button perform correctly e.g. the button will respond pointer hover over to the image only, but will still highlight the text (as if the text was part of the - and not separate as it actually is).
Note that since the text and image elements are screen-size adaptive, all distances and sizes must be percentage based)
See Fiddle HERE:
Note what happens when you hover just on top of the image. Also note what happens when you touch the edges of the image VS the center...
<div id="main_positioning_container">
<div id="my_account_dashboard_container">
<div id="contact_information_icon"
style="color:#292726"
onMouseOver="this.style.color = '#f48325'"
onMouseOut="this,style.color = '#292726'" >
<img src="../icons/icon_ContactInforrmation_inactive.png"
img onMouseOver="this.src='../icons/icon_ContactInforrmation_hover.png'"
onMouseOut="this.src='../icons/icon_ContactInforrmation_inactive.png'"
alt="icon_ContactInforrmation_inactive"
width="100%"
hight="auto"
style="margin-bottom: -20%;">
<p align="center">Contact Information</p>
</div>
</div>
</div>
#main_positioning_container {
position:relative;
width: 100%;
top: 75px;
left: 0px;
}
#my_account_dashboard_container {
visibility:visible;
}
#contact_information_icon {
position: absolute;
width: 25%;
z-index: 3;
color: #292726;
font: Kalinga;
font-size: 100%;
margin-top: 13.75%;
margin-left: 7.5%;
height: 20px;
}

Why is only a small piece of this div visible?

I am running a test javascript/CSS app and there is a div that is exhibiting very strange behavior. I can't for the life of me figure out what is going on.
Point your browsers at http://korhal.andrewmao.net:9294/, and check out the div.payment (div with class payment) in the DOM.
This div contains an image and some text, but none of it's visible except for a tiny end piece of the text which shows up on Chrome and FF but not IE9. I haven't styled this part of the DOM yet but I can't even figure out why it is completely invisible. Examining the applied CSS doesn't seem to turn up any z-index, transparency, or hidden issues. Any suggestions?
My apologies, this code is hard to gist and this link may be subject to change.
Since ur .background is position fixed it will come on top , so u have to add
position:relative to div.payment
Use this
.payment img {
float: left;
position: relative;
z-index: 1;
}
and
.payment p {
float: left;
position: relative;
z-index: 1;
}

Categories

Resources