Html 如何使列表组（bootstrap）只占用少量空间，但仍保持中心位置

因此，我有一组由日期分隔的列表组。我正在尝试将列表组集中起来，这样我就可以开始销售横幅广告，因为我没有资格使用AdSense。我可以把它缩小，但是列表没有居中。谢谢你的帮助

代码来自以下JavaScript：

function getSongList(xml) {
  var x, i, xmlDoc, txt, j;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("DAY");



  for(j = 0; j<=x.length; j++){
    txt = "";
    z = x[j].getElementsByTagName("SONGNAME");
    y = x[j].getElementsByTagName("ARTIST");
    w = x[j].getElementsByTagName("DATE");
    p = x[j].getElementsByTagName("LINK");

    var date = document.createElement('h1');
    date.className = 'date'
    var date_id = 'date' + j
    date.id = date_id;
    var body = document.querySelector('body');
    body.appendChild(date);
    var date_data = w[0].childNodes[0].nodeValue;
    document.getElementById(date_id).innerHTML = date_data;


    for (i = 0; i< z.length; i++) {
      txt += "<a href=" +  p[i].childNodes[0].nodeValue;
      txt += "class='list-group-item'>";
      txt += "<b>";
      txt += z[i].childNodes[0].nodeValue;
      txt += "</b>";
      txt += " - ";
      txt += y[i].childNodes[0].nodeValue;
      txt += "</a>";

    }

    var div = document.createElement('div');
    div.className = 'list-group';

    var div_id = 'list' + j;
    div.id = div_id
    var body = document.querySelector('body');
    body.appendChild(div);


    document.getElementById(div_id).innerHTML = txt;
  }

}

函数getSongList（xml）{ 变量x，i，xmlDoc，txt，j； xmlDoc=xml.responseXML； txt=“”； x=xmlDoc.getElementsByTagName（“日”）；

---

欢迎来到StackOverflow。请把问题代码放在你的问题中，而不是链接到一个网站。好的，我改了