Separation between inline elements with a line break

Question

Separation between inline elements with a line break

I am faced with the challenge of placing the a tag on a new line while maintaining center alignment, without being able to modify the HTML. The display:block option extends the clickable area beyond the text.

See the screenshot below for the desired outcome

https://i.sstatic.net/8XGXZ.jpg

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/

css

Answer 1

Answer №1

Include the display:block property in the a element

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 eliminate the excess 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>

Answer 2

Include the display:block property in the a element

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 eliminate the excess 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>

Answer 3

Answer №2

Take a look at the example here.

To center the a tag, simply apply display: table; margin: 0 auto;.

See the code snippet 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;
}

Answer 4

Take a look at the example here.

To center the a tag, simply apply display: table; margin: 0 auto;.

See the code snippet 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;
}

Answer 5

Answer №3

Block display serves a specific purpose:

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>

Answer 6

Block display serves a specific purpose:

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>

Answer 7

Answer №4

Sure, using display:block; does work in this scenario. However, it applies to all <a> tags on the webpage. A more effective approach would be to utilize selectors and class attributes or IDs to avoid displaying a new line as a block element for <a> tags (which is the default behavior).

For instance:

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

Alternatively, you can style the <a> tag directly by class:

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

By the way, while this solution may not be optimal, it does get the job done. Just keep that in mind.

Remember, the <a> tag is inline by default in the box model :)

Answer 8

Sure, using display:block; does work in this scenario. However, it applies to all <a> tags on the webpage. A more effective approach would be to utilize selectors and class attributes or IDs to avoid displaying a new line as a block element for <a> tags (which is the default behavior).

For instance:

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

Alternatively, you can style the <a> tag directly by class:

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

By the way, while this solution may not be optimal, it does get the job done. Just keep that in mind.

Remember, the <a> tag is inline by default in the box model :)

Separation between inline elements with a line break

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A guide to implementing drag and drop functionality using JavaScript

Angular 11 component encountering issues with accessing server-side data

Branding image from Bootstrap overlapped with a container situated below the navigation bar

Highlight the navigation transition in the menu

Graph is vanishing while linked

Applying the transform:scale property to the parent element causes the child element's dropdown menu to appear beneath a different row

:after pseudo-element along with HTML tags

Is it advantageous to employ several wrapper-divs inside section elements when working with HTML5 and CSS?

Alter the webpage's background color using setInterval while also implementing automatic scrolling based on active records

The challenges of positioning HTML li elements in a floating layout

Puzzling blank area found beneath the form component

The collapsible tree nodes overlap one another in the D3.js visualization

The background image in Internet Explorer's <td> element will only be visible where there is existing content

If I desire to utilize a particular font that I am aware is not readily accessible on the majority of users' computers

Resetting several sticky titles after displaying and hiding elements

Issues with the aligning of buttons using the justify-content property

Resizing Bootstrap Modal using React with a Personalized Dimension

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

Customizing the default image of a Select dropdown field in Sencha Touch

Is there a way to customize the CSS ul menu specifically for the JavaScript autocomplete feature?