Issue
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.stack.imgur.com/IJanh.png
How I would like the text to be in red. [2]: https://i.stack.imgur.com/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>Solution
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;
}
Answered By - wch
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.