0

I want to have a div with an image and a button. The button should be in the upper right corner and the image should be centered. I can center the image with justify-content:center, align-items:center, and display:flex. From what I understand I can put a button in the upper right corner of a div using absolute positioning. But when I try it doesn't work. Here's what I have in fiddle. It looks like its positioning it at 0,0 with respect to the entire window, and not in the parent div.

http://jsfiddle.net/exot7q6k/23/

 #container {
  display: flex;  
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  border: 2px solid #1877f2;
   width: 500px;
   height: 200px;
   margin-bottom: 16px;
 } 
 #button {
     line-height: 12px;
     width: 18px;
     font-size: 8pt;
     font-family: tahoma;
     margin-top: 1px;
     margin-right: 2px;
     position:absolute;
     top:0;
     right:0;
 }

 <div id="container">
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
      <input id="button" type="radio" value="X"/>
</div>
Jay Hu
  • 83
  • 7

1 Answers1

2

You can use below property in your container style.

#container {
  display: flex;  
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  border: 2px solid #1877f2;
   width: 500px;
   height: 200px;
   margin-bottom: 16px;
   position: relative;
 } 
 #button {
     line-height: 12px;
     width: 18px;
     font-size: 8pt;
     font-family: tahoma;
     margin-top: 1px;
     margin-right: 2px;
     position:absolute;
     top:0;
     right:0;
 }
<div id="container">
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
       <input id="button" type="button" value="X">
</div>
position: relative;

And I am suggesting you to use button type as the input other than using radio.

<input id="button" type="button" value="X">
Sandushi Dileka
  • 166
  • 5