In the below code, I need to place a
tag in new line and maintain the center alignment. I cannot change the html. display:block
makes the more clickable area outside the text.
Below is the screenshot for required result
div{
background: #333;
color: #fff;
margin: 0 auto;
padding: 20px;
text-align: center;
width: 400px;
}
a{
color: red;
display: inline-block;
clear: both;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>
https://jsfiddle.net/afelixj/nq7ow9eq/
Add display:block
to a
div{
background: #333;
color: #fff;
margin: 0 auto;
padding: 20px;
text-align: center;
width: 400px;
}
a{
color: red;
display: block;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>
To remove the extra clickable area
div {
background: #333;
color: #fff;
margin: 0 auto;
padding: 20px;
text-align: center;
width: 400px;
}
a {
color: red;
display: inline;
}
a:after {
content: "\a";
white-space: pre;
}
a:before {
content: "\a";
white-space: pre;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With