CODEWITHSUNDEEP
htmlcss
Caelan
Caelan

Reputation: 48

Text button alignment issues

I hope you are well... I'm currently experiencing text alignment problems, I have been unable to fix it after a number of attempts and would very much appreciate it if someone could help me and potentailly show where I went wrong too... many thanks! [![enter image description here][1]][1]

[![enter image description here][2]][2]

Before [1]: https://i.sstatic.net/IJanh.png

How I would like the text to be in red. [2]: https://i.sstatic.net/vLJZJ.png

Here is the code below.

 body {
        background-color: #d12502;
        margin: 0px;
        
      
      }

      html, body {
        max-width: 100%;
    }

      .button {
        display: block;
        outline: none;
        cursor: pointer;
        text-decoration: none;
        font: 14px "Arial";
        
        overflow:hidden ;
        border-radius: 6px;
        padding: .4em 1em .5em 1em;
        margin: 10px ;
        background: #d12502;
        background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
        border-top: 1px solid #4081af;
        border-right: 1px solid #2e69a3;
        border-bottom: 1px solid #20559a;
        border-left: 1px solid #2e69a3;
        -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        color: #fff;
        -webkit-background-clip: padding-box;
      }

   

.arrow {
  border: solid #d12502;
  border-width: 0 2px 2px 0px;
  display: inline-block;
  padding:3px;
  float: right;
  margin:-22px -260px ; 

}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}




.button {
    padding: .35em 20em 10vw 42vw;
    margin: -10px 3vw;
  text-align: left;

  height: 15px;
  width: 50vw;
    background: #ffffff;
    background: -moz-linear-gradient(0% 100% 90deg, #fcfdff, #ffffff);
 border: none;  
    color: rgba(0, 0, 0, 0.808);
    -webkit-background-clip: padding-box;
}
 
.button:hover {
    background: #d12502;
    background: -moz-linear-gradient(0% 100% 90deg, #d12502, #d12502);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d12502), to(#d12502));
    border: none;
    -moz-box-shadow: inset 0 1px 0 0 #d12502;
    -webkit-box-shadow: inset 0 1px 0 0 #d12502;
    cursor: pointer;
    -webkit-background-clip: padding-box;
}
 
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
    </head>

    <style>
      #navbar {
          width: 125vw;
          height: 40px;
          margin: 0px;
          background-color: rgb(255, 255, 255);
      }

      #navbar img {
          display: block;
          width: 200px;
          height: 40px;
          margin: auto;

      }

     p {
margin: 10px 10px 10px -110px;
white-space: normal;

     }

      img {
  width: 100%;
  height: auto;
}


      div {
  width: 25px;
  height: 2px;
  background-color: black;
  margin: -7vw 108vw 8.3vw;
  
  


}





  </style>

<body>


  <nav id="navbar">
    <img src="logo.png" alt="Logo image">
    
    <div></div>
    <div></div>
    <div></div>

</nav>

<br>


<br>



<img src=".png" class=""><button class="button"><p>THIS IS BUTTON NUMBER ONE </p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>

<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>

<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>

<img src=" .jpeg" class="">
<br>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>


    </body>
</html>

Upvotes: 0

Views: 121

Answers (3)

Dorji Tshering
Dorji Tshering

Reputation: 1011

You should avoid using paragraph tags inside button tags, why? Visit here.. That being said, you can use span tag inside the button element to achieve what you want and that's what I have done below. As you can see, I have also wrapped your icon inside span, so it stays vertically aligned upon floating to the right. I have also removed few properties to the .arrow class as you can see. You can give your own class to the span elements and replace it in styles also. I have given a custom width to the button element and you can change it to your need.

.test-button {
    width: 300px;
    position: relative;
    padding: 15px;
}

.arrow {
  border: solid #d12502;
  border-width: 0 2px 2px 0px;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.test-span {
    position: absolute;
    left: 10px;
}

.test-icon {
    float: right;
}
<button class="test-button">
  <span class="test-span">THIS IS BUTTON NUMBER ONE</span> <span class="test-icon"><i class="arrow    right"></i></span>
</button>

Upvotes: 1

wch
wch

Reputation: 304

I changed some and you can see the new .button-wrap wrapper class. This class is needed to align the image and the button. If the image is not needed, then you can delete this class and everything will work as before.

HTML:

<style>
  #navbar {
    height: 40px;
    margin: 0px;
    background-color: rgb(255, 255, 255);
  }

  #navbar img {
    display: block;
    width: 200px;
    height: 40px;
    margin: auto;
  }
</style>

<body>
  <nav id="navbar">
    <img src="logo.png" alt="Logo image">
  </nav>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>THIS IS BUTTON NUMBER ONE </p><i class="arrow right"></i>
    </button>
  </div>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>Success</p><i class="arrow right"></i>
    </button>
  </div>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>Success</p><i class="arrow right"></i>
    </button>
  </div>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>Success</p><i class="arrow right"></i>
    </button>
  </div>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>Success</p><i class="arrow right"></i>
    </button>
  </div>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>Success</p><i class="arrow right"></i>
    </button>
  </div>
  <div class="button-wrap">
    <img src=".png" class=""><button class="button">
      <p>Success</p><i class="arrow right"></i>
    </button>
  </div>
</body>

I used flexbox to align text and arrow. Works well and everything looks great.

CSS:

body {
  background-color: #d12502;
  margin: 0px;
}

html,
body {
  max-width: 100%;
}
.button-wrap {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  font: 14px "Arial";
  overflow: hidden;
  border-radius: 6px;
  padding: 0.4em 1em 0.5em 1em;
  margin: 10px;
  background: #d12502;
  background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#52a8e8),
    to(#377ad0)
  );
  border-top: 1px solid #4081af;
  border-right: 1px solid #2e69a3;
  border-bottom: 1px solid #20559a;
  border-left: 1px solid #2e69a3;
  -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  -webkit-background-clip: padding-box;
}
.arrow {
  border: solid #d12502;
  border-width: 0 2px 2px 0px;
  display: inline-block;
  padding: 3px;
  float: right;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.button:hover {
  background: red;
  border: none;
  -moz-box-shadow: inset 0 1px 0 0 #d12502;
  -webkit-box-shadow: inset 0 1px 0 0 #d12502;
  cursor: pointer;
  -webkit-background-clip: padding-box;
}

Upvotes: 1

HiB
HiB

Reputation: 33

Under <style> on the HTML doc.

  p {
margin: 10px 10px 10px -110px;
white-space: normal;

     }

That white-space: normal; change it to white-space: nowrap; Tested on codepen, that should bring your text back to one line.

Click here for more Info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Upvotes: 1

Related Questions