Quill toolbar alignment buttons

I'd suggest using the shorthand in the js for the toolbar, so not using a custom html toolbar. Then by writing

toolbar: [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]

you can define 4 discrete alignment buttons as per the answer here by @jhchen. He also has a nice example here. Otherwise I'd assume you could achieve the same though html (based solely on looking at the source code the shorthand generates):

<span class="ql-formats">
  <button type="button" class="ql-align" value="">
    <svg viewBox="0 0 18 18"> 
      <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
    </svg>
  </button>
  <button type="button" class="ql-align" value="center">
    <svg viewBox="0 0 18 18">
      <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
    </svg>
  </button>
  <button type="button" class="ql-align" value="right">
    <svg viewBox="0 0 18 18"> 
      <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
    </svg>
  </button>
  <button type="button" class="ql-align" value="justify">
    <svg viewBox="0 0 18 18">
      <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line>
    </svg>
  </button>
</span>

However, I would honestly suggest you use the shorthand, it keeps it all nice and clean and it ensures it works. Furthermore, it still allows you to add custom buttons (check this)

You can add a dropdown option as it's own button by adding a value attribute to it like so:

<button class="ql-align" value="center">

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: '#toolbar'
  }
});

<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>

<div id="toolbar">
  <span class="ql-formats">
    <button class="ql-align" value=""></button>
    <button class="ql-align" value="center"></button>
    <button class="ql-align" value="right"></button>
    <button class="ql-align" value="justify"></button>
  </span>
</div>
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>