I am trying to align an SVG to the right of a div as shown below.

No matter what style I add to the SVG it does not seem to move.

I have tried adding display: flex with justify-content:end and that hasn't worked. I also tried float: right and that didn't work. Lastly, I tried margin-left: 50% and that doesn't even seem to move it.

I'm so confused.

Here is my SVG

`

 <svg width="14" height="15" xmlns="http://www.w3.org/2000/svg">
        <path id="cross-icon" onclick="closeModal();"
        d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z" 
        fill="#69707D" fill-rule="evenodd"/>
      </svg>

`

Here is my css

`

 #cross-icon {
    fill: black;
    margin: 0 auto !important;
    top: -8%;
    position: absolute;
}

`

CodePudding user response：

You're applying the class to the path attribute. I wouldn't do it this way. Wrap the entire SVG inside of another div and apply the styling as follows.

<button >
 <svg width="14" height="15" xmlns="http://www.w3.org/2000/svg">
        <path 
        d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z" 
        fill="#69707D" fill-rule="evenodd"/>
      </svg>
</button>

.close{
  position: absolute;
  z-index: 999;
  right: 3rem; 
  top: 3rem;
  cursor: pointer;
}

https://jsfiddle.net/cp2z9omn/

CodePudding user response：

don't apply style to the <path> element

instead affect the whole <svg> (use an id if you want-- my example does not)

float: right & display: inline are easy, simple to understand, and highly effective. You may not even need to position: absolute. My example does not.

 svg 
{
fill: black;
top: -8%;
display: inline;
float: right;
cursor: pointer
}

<div style="width: 80%; height: 60%; margin: auto">`SOME OTHER CONTENT (YOUR BOX)`</div>
<svg width="14" height="15" xmlns="http://www.w3.org/2000/svg">
        <path onclick="closeModal();"
        d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z" 
        fill="#69707D" fill-rule="evenodd"/>
</svg>