CODEWITHSUNDEEP
css
Felix A J
Felix A J

Reputation: 6470

Line break between inline elements

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

enter image description here 

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/

Upvotes: 4

Views: 1165

Answers (4)

user2923202
user2923202

Reputation: 1

yes display:block; works fine in this situation, but it matches ALL <a> tags on web page. A better solution is using selectors and class attribute or id to prevent display new line as block element for <a> (normally this line by default).

for example

div.div_with_a_newline_by_css > a
{
  color: red;
  display: block;
  clear: both;
}

or direct in tag a identified by class

a.tag_and_newlines{
  color: red;
  display: block;
  clear: both;
}

BTW This is not an optimal solution at all but it works, please remember

tag a is inline by default in box model :)

Upvotes: 0

Shashank
Shashank

Reputation: 2060

Refer to the demo here.

Simply add display: table; margin: 0 auto; to the a tag.

Please find the code below:

HTML:

<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>

CSS:

div {
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}

a {
  color: red;
  display: table;
  margin: 0 auto;
}

Upvotes: 1

Akshay
Akshay

Reputation: 14348

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>

Upvotes: 5

Shomz
Shomz

Reputation: 37701

That precisely is what block display is for: 

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: 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>

Upvotes: 0

Related Questions