Photoshop Question posted in
The official user guide can be found here.

Is it possible to center an element using child element as center – Photoshop

I have an element inside an element like this:

<p>some text <i class="fas fa-arrows-alt-h"></i> some more text</p>

Is it possible to center the <p> element with the <i> element as the center?

EDIT:

The text on both sides are not the same length

For clarification, this is what i am trying to achieve (Photoshopped)
Clarification

Tags:

2

Answers


  1. 0

    Like this?

    Add class centered to tag <i>

    Sorry for bad spelling, I had nothing to work with.

    Run Code Snippet

    p {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div>
  <p>some text <i class="centered fas fa-arrows-alt-h"></i> some more text</p>
  <p> text <i class="centered fas fa-arrows-alt-h"></i> more text</p>
  <p> bardun <i class="centered fas fa-arrows-alt-h"></i> guyline</p>
  <p> ball <i class="centered fas fa-arrows-alt-h"></i> campfire</p>
  <p> knob <i class="centered fas fa-arrows-alt-h"></i> knot</p>
  <p> leder <i class="centered fas fa-arrows-alt-h"></i> scot Leader</p>
  <p> lejsss <i class="centered fas fa-arrows-alt-h"></i> campsite</p>
</div>
    Login or Signup to reply.
  2. 0

    If you can add your text within another container you can try the solution below:

    p {
  display: flex;
}
p > span {
  width:100%;
}

p > span:first-child {
 text-align:right;
}

.centered {
  margin:0 5px;
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<p><span>some text</span> <i class="centered fas fa-arrows-alt-h"></i><span> some more text</span></p>
<p><span>text</span> <i class="centered fas fa-arrows-alt-h"></i> <span>more </span></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search