diff --git a/src/views/selectbutton/SelectButtonDemo.vue b/src/views/selectbutton/SelectButtonDemo.vue
index eb4c74376..70bcc2d81 100755
--- a/src/views/selectbutton/SelectButtonDemo.vue
+++ b/src/views/selectbutton/SelectButtonDemo.vue
@@ -19,9 +19,9 @@
             <h3>Custom Content</h3>
             <SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
                 <template #option="slotProps">
-                    <div style="text-align: center; padding: 1em; width: 125px">
-                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
-                        <div style="margin-top: 1em">{{slotProps.option.brand}}</div>
+                    <div class="car-option">
+                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
+                        <div>{{slotProps.option.brand}}</div>
                     </div>
                 </template>
             </SelectButton>
@@ -60,4 +60,17 @@ export default {
         'SelectButtonDoc': SelectButtonDoc
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+/deep/ .car-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        width: 24px;
+        margin-right: .5em;
+    }
+} 
+</style>
\ No newline at end of file
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index 2f8d2b73f..983be7753 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -40,10 +40,10 @@ export default {
 <template v-pre>
 &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
 	&lt;template #option="slotProps"&gt;
-		&lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
-			&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
-		&lt;/div&gt;
+        &lt;div class="car-option"&gt;
+            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+            &lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt;
+        &lt;/div&gt;
 	&lt;/template&gt;
 &lt;/SelectButton&gt;
 </template>
@@ -171,9 +171,9 @@ export default {
 &lt;h3&gt;Custom Content&lt;/h3&gt;
 &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
     &lt;template #option="slotProps"&gt;
-        &lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
-            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
-            &lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
+        &lt;div class="car-option"&gt;
+            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+            &lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/SelectButton&gt;
@@ -204,6 +204,19 @@ export default {
 		this.selectedCar = this.cars[1];
 	}
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+/deep/ .car-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        width: 24px;
+        margin-right: .5em;
+    }
+} 
 </CodeHighlight>
 			</TabPanel>
 		</TabView>