CODEWITHSUNDEEP
htmlcss
SmukasPlays77
SmukasPlays77

Reputation: 75

How can I place an icon next to a text that fits the length of the sentence?

I need to place an icon on the left side of a text and make its position adjust according to the size of the text on the side and fit inside the box it is in, since it is variable. I also need the spaces between the other elements not to be changed and that the text is always center-aligned in relation to the others.

I need to make this image be on the left side of this h2:

<img :src="require(`@/assets/${metadata.platform}.svg`)" alt='Platform' class="platform">
             <h2>{{metadata.nick}}</h2>

Full code:

<template>
  <div id="app" class="raleway">
    <section>
      <div class="steps-wrapper text">
        <Step/>
        <div class="image-cropper">
          <img
          v-if="metadata.filename"
          :src="require(`@/assets/${metadata.filename}.jpg`)"
          alt="Profile Picture"
          class="profile-pic">
        </div>
        <h2>{{metadata.name}}</h2>
        <img :src="require(`@/assets/${metadata.platform}.svg`)" alt='Platform' class="platform">
         <h2>{{metadata.nick}}</h2>
          <p id='country'> {{metadata.country}} </p>
          <p>{{metadata.function1}}</p>
      </div>
    </section>
  </div>
</template>

<script>
import Step from "./CreationView";
export default {
  name: "App",
  components: {
    Step,
  },
  props: {
    metadata: Object,
    filename: String
  },
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #3b3b3b;
}

.steps-wrapper {
  background-color: #232323;
  margin-bottom: 0.5rem;
  border: 1px solid #707070;
}

.text{
  color: #FFF;
  font-size: .5em;
  text-align: center;
  font-weight: 600;
}

h2{
  font-size: 2em;
  line-height: .5em;
}

p{
  font-size: 2em;
  line-height: 0;
}

.platform{
  position: relative;
  right: 1em;
  top: .5em;
}

 #country{
  color: rgba(255, 255, 255, 0.5);
  padding: 1.5em 0;
  font-weight: 500;
}

.image-cropper {
    width: 90px;
    height: 90px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin: 3em auto;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  margin-left: -25%;
  height: 100%;
  width: auto;
}
</style>

Upvotes: 0

Views: 1033

Answers (1)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

Your vue code isn't relevant, so I will ignore that. You can just put the two elements in a container and then use flex-box to have them share the same row. Use align-items on the .container if you want to position them differently than placing them in the center;

.container {
  display: flex;
}
<h2>NAME</h2>

<div class="container">
  <img src="https://picsum.photos/50/50" alt='Platform' class="platform">
  <h2>NICK</h2>
</div>

<p id='country'>COUNTRY</p>
<p>FUNCTION1</p>

Upvotes: 1

Related Questions