Horizontally centering text in a nested div that's set to justify

center div inside another div vertically and horizontally
center div horizontally and vertically
center div vertically
center text in div
css center text vertically
center image in div vertically and horizontally
vertical-align text in div
center two divs horizontally

I'm trying to create a responsive website (not using flex). I need to create a title over two display:table cells, and I'd like it to be centered. The main div holding the table is text-align:justify. Nothing I seem to do fixes it!

I've tried nearly everything I can find on the subject: text-align:center;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;

just plain margin: 0 auto; and numerous combinations of the above. The text remains stubbornly in the right corner.

HTML

<div class="row">
  <div class="novel novelleft">
    <div class="noveltitle">TITLE</div>
      stuff
  </div>
  <div class="novel novelright">
      more stuff
  </div>
</div>

CSS

.novel {
  display: table;
  width: 100%;
  padding: 10px;
  text-align: justify;
  text-align-last:left;
  background-color: #fff;
}
.novelleft {
  width: 40%;
  display: table-cell;
  vertical-align: top;
  padding-left: 13%;
  background-color: #fff;
}
.novelright {
  width: 60%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 13%;
  background-color: #fff;
}

.noveltitle {
  font-family: 'Cinzel', serif;
  text-align: center;
}

My apologies if that's not right, I'm new here. Thanks for any help!

EDIT Here's what it's doing What I want it to do


How to Horizontally Center a <div> in Another <div>, Use the "inline-block" value of the display property to display the inner <div> as an inline element as well as a block. Set the text-align property on the outer <div> element to center the inner one. Set the marginproperty to "auto" to horizontally center the <div> element within the page. The "margin: 0 auto" does the actual centering. Set your preferred colors for the outer and inner <div> elements by using the background-colorproperty.


If you want a table with a centered caption, just use a table with a centered caption.

.novel {
  width: 100%;
  padding: 10px;
  background-color: #fff;
}
.novelleft {
  width: 40%;
  vertical-align: top;
  padding-left: 13%;
  background-color: #fff;
}
.novelright {
  width: 60%;
  vertical-align: middle;
  padding-right: 13%;
  background-color: #fff;
}

.noveltitle {
  font-family: 'Cinzel', serif;
  text-align: center;
}
<table class="novel">
 <caption class="noveltitle">TITLE</caption>
 <tr>
  <td class="novelleft">stuff</td>
  <td class="novelright">more stuff</td>
 </tr>
</table>

How to horizontally center a div within a div using CSS (if it's even , There are two methods to achieve this: 1. When the inner division do not FLOAT: just add the CSS property text-align:center; on the outer division. 2. When the� In this example, I am using Bootstrap’s width utility class of .w-50 to make the div 50% wide all the time. Then I added a utility class of .mx-auto that sets the margin left and right to auto centering it horizontally inside the .row container.


Though there are couple of answers that will obviously work I'd assume. I still think you should be open to using flex and then providing backward compatibility to IE with rather simpler CSS.

<div class="container">
  <div class="title">
    Centered Title Goal
  </div>
  <div class="items">
    <div class="novel">
      .novelLeft
    </div>
    <div class="novel">
      .novelRight
      <div>
      .novelRight
      </div>
    </div>
  </div>
</div>

CSS -

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  border: solid 1px black;
}

.title {
  width: 100%;
  text-align: center;
}

.items {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.novel {
  flex: 1;
  display: inline-block;
  width: 50%;
}
.novel:nth-child(1){
  background:#404040;
}
.novel:nth-child(2){
  background: #bfbfbf;
}

This will create a flexbox and as a fallback to IE where flex property doesn't work, the novelLeft and novelRight will be set to inline-block of width:50%. It's way more cleaner than doing the ancient table outlines. And as you can see, extra content on novelRight doesn't matter either.

https://jsfiddle.net/4q6f9zy7/3/

How to center things with style in CSS, h1, h3 { text-align: center; } .blue-square-container { text-align: center; } If we we want to simply center an element horizontally on the page like� Center Align Elements. To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: This div element is centered.


Vertical Centering in CSS, Though there is a CSS property vertical-align, it doesn't work like attribute an internal object (typically long text in <div>) is inside the area and I don't know its here (counted height is taken as a base of percentage height of nested tags). Bootstrap center (horizontal align) You can center any element (text, images, div, buttons) horizontally by using center utilities or flexbox. See the examples below to find out how.


Alignment, font styles, and horizontal rules in HTML documents, Lots of blue italic text Font style elements must be properly nested. Centering a text (or any element) means horizontally aligning the piece of content in the center of the parent tag. Quite often, it will be text that needs to centered but it can be an image or any other visual content. The CSS text-align property of the tag specifies the horizontal alignment of its child elements. There are several different values that you can use with the text-align property: left, right, center, justify, initial and inherit.


Why can't I align EVERYTHING?!?!, DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" for HOURS to BOTH align all the circles (all the <div> tags) AND at the same time center all the text. You just set the circles' position to relative , the inner p aragraphs' position to described in this excellent article on vertically centered multiline text. How to make a div center align in HTML? How to center align text in table cells in HTML? How to center your website horizontally with CSS? How to print the contents of array horizontally using C#? How to center an element vertically and horizontally with CSS? Vertical align text in a block element with HTML; Show flex items horizontally in