How to center
inside a

Question

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?

score 5 · Answer 1 · edited May 23 '17 at 11:51

5

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.

edited May 23 '17 at 11:51

Community

1
1

answered Sep 10 '16 at 00:21

NoobishPro

2,539
1
12
23

then is there a way to make a div clickable that calls a method without using jQuery? – Jo Ko Sep 10 '16 at 00:25
Why not just use an `` inside the button without using a `
`? What do you need the div for, exactly?
– NoobishPro Sep 10 '16 at 00:26
Please take a look at the original post. Updated with code and what I am trying to achieve. – Jo Ko Sep 10 '16 at 00:52
1

yes, you are allowed to use a `` instead of a `
`. Then simply put a `text-align:center;` on the button and you should be good to go?
– NoobishPro Sep 10 '16 at 01:01
sorry but could you show a working example because I've tried it and no luck – Jo Ko Sep 10 '16 at 01:06
I created a fiddle for you and added it to my answer. It works fine for me, so I'm unsure of what the problem is? – NoobishPro Sep 10 '16 at 01:10
Your answer requires the code to be posted here, not a third party site that may disappear tomorrow, helping no one else later. – Rob Sep 10 '16 at 01:11
@Rob I will post the code when I get confirmation that it works, otherwise I'll remove it. I only created the fiddle because it was asked, and will remove it if it didn't fix the issue. – NoobishPro Sep 10 '16 at 01:14
@Babydead sorry but I am looking for one that is emoji image itself, not on top of a button, that is clickable and triggers a method. Could you show that? – Jo Ko Sep 10 '16 at 07:45
@JoKo I'm sorry, I'm really having trouble understand exactly what you want. First you want a round/oval button with an emoji in the center. Now you want the emoji only? https://jsfiddle.net/68w6m7rr/4/ < is this what you mean? – NoobishPro Sep 10 '16 at 09:33
@Babydead sorry there has been miscommunication. Yes, but it still has clickable surface bigger than that of the actual emoji image. Is it possible to make it only clickable or as close to the actual size of the emoji image? – Jo Ko Sep 10 '16 at 09:36
@JoKo you mean like this: https://jsfiddle.net/68w6m7rr/5/ ? Yes, simply remove the width & height from the button haha. (I got those from your example). Unfortunately, it'll always be a 'square' around the emoji, unless you want to delve deep into complicated javascripts. – NoobishPro Sep 10 '16 at 09:41
@Babydead would that be the best way to act as if the emoji image itself is only clickable? But seems like the round button would cover less space, making only the emoji image more clickable. Trying to figure out the best way to minimize the button space as much as possible and have emoji image cover as much space as possible. – Jo Ko Sep 10 '16 at 11:08
@JoKo you could do it like this: https://jsfiddle.net/68w6m7rr/7/ -- this makes the emoji's container round, meaning the clickable service area is less. You won't get it any less than this unless you use area mappings which is a really tidious job for a simple button. I wonder, is this good enough for you? – NoobishPro Sep 10 '16 at 11:33

Christopher Wirth · Answer 2 · 2016-09-10T00:57:47.487

0

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">&#128076;</button>

edited Sep 10 '16 at 00:57

answered Sep 10 '16 at 00:45

Christopher Wirth

221
1
2
8

Please take a look at the original post. Updated with code and what I am trying to achieve. – Jo Ko Sep 10 '16 at 00:52

score 0 · Answer 3 · answered Sep 10 '16 at 01:08

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);}

how can I just create the emoji unicode image itself to be clickable that triggers a method without jQuery, rather than having emoji image on top of a button? — Jo Ko, Sep 10 '16 at 01:47

score 0 · Answer 4 · edited May 23 '17 at 12:14

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:

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.

sorry but I am looking for one that is emoji image itself, not on top of a button, that is clickable and triggers a method. Could you show that? — Jo Ko, Sep 10 '16 at 07:47

How to center inside a ?

4 Answers4

How to center
inside a