QTabWidget - tab icons not in the center

Question

I have a QTabWidget with six tabs, and all the tabs have an icon - but the icons are not in the center of the tab:

What I've done so far :

tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
                        "QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs

And:

tabWidget->setTabIcon(index, QIcon("iconPath"));

Any ideas why this is happening, and how I can fix it?

Answer 1

I too have been struggling with this issue. Here is how I resolve it.

Background:

I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:

My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).

I had this as my stylesheet:

QTabBar::tab:hover {
    background-color: #212121;
}

QTabBar::tab:selected{
    background-color: #313131;
}
QTabBar::tab {
    background-color: #111111; 
    height:70px;
    width: 70px;
    border: none;
}

Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.

Solution:

After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.

adding the lines:

padding-top: -15px;
padding-bottom: 15px

Resolved the problem for me, however this needs to be changed according to your needs.

My final stylesheet resembles:

QTabBar::tab:hover {
    background-color: #212121;
}

QTabBar::tab:selected{
    background-color: #313131;
}
QTabBar::tab {
    background-color: #111111; 
    height:70px;
    width: 70px;
    border: none;
    margin: 0px;
    padding-top: -15px;
    padding-bottom: 15px
}

Answer 2

If somebody has the same problem like me with the icons in the tabs, I found a solution after days and days search for this, and its so simple :D

Just add this to the stylesheet for the TabWidget:

tabWidget->setStyleSheet("::tab {margin: 0px;}");
                                 ************